/* 
Для мобил
*/

@media screen and (hover: none) and (pointer: coarse) {

    div.loader {
        width: 50%;
        height: 50%;
        z-index: 9999;
    }
    div.overlay, div.overlayError {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    div.div-info{
      z-index: 2000;
    }

    div.overlayBack{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
        z-index: 9998;
    }

    div.loginDiv {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      z-index: 1001;
    }

    .markFormFio {
        text-decoration: none !important;
        //border: 2px solid silver;
        padding: 0px 10px 0px 10px;
        border-radius: 10px 10px 10px 10px;
    }

    .font-title {
        font-size: 500%;
    }

    .m-copyright {
      font-size: 200%;
    }

    .m-confirm-button {
      width: 50%;
      height: 100px;
      font-size: 300% !important;
    }
    .m-confirm-content {
      font-size: 300% !important;
    }
    .m-confirm-content-fio {
     font-size: 150% !important; 
    }

    .m-usersMarkTable th, .m-usersMarkTable td{
      font-size: 300% !important; 
    }

    
/**************** Mark form ********************/

    div.mobile-mark {
        display: block;
    }

    div.add-mark-div-user {
    width: 90%;
    }

    span.m-q3span {
      font-size: 300% !important;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      color: maroon;
    }

    .m-multi-select{
      font-size: 300% !important;
      width: 95%;
      position: relative;
      height: 40%;
    }

    
    /****** chosen start ******/

    #otherUser {
        width: 95%;
        height: 4em;
    }

    /* placeholder */
    #otherUser_chosen  > a {
        //margin-top: 14px;
        font-size: 1em;
        height: 100%;
    }

    #otherUser_chosen > a > span{
        margin-top: 15px;
        height: 100%;
        font-size: 2em;
        //display: inline-block;
        vertical-align: middle;
    }

    #otherUser_chosen  > a{
        height: 5em;
    }

    

    /* search field */
    #otherUser_chosen  > div > div > input[type=text]{
        font-size: 2em;
    }

    /****** chosen end ******/

    table.radioMarks1 {
        width: 80%;
        font-size: 200% !important;
    }

    table.radioMarks2 {
        width: 80%;
        font-size: 200% !important;
    }
    .tableradio{
      font-size: 200%;
      z-index: 101;
      display: inline-block;
    }
    .m-nomination-title{
        font-size: 150% !important;
    }

    .m-nomination-radio{
        font-size: 200%;
    }

    .m-radio-label {
        //position: relative;
        left: -40%;  
        top: 15px;
        font-size: 200%;
        opacity: .5;
        z-index: 100;
        display: inline-block;
    }

    table.markTable {
        width: 100%;
    }

    table.show-mark {
        width: 90%;
    }

    textarea.qComment {
        width: 90%;
    }

    .m-label-nominations > span{
      display: inline-block;
      position: relative;
      font-size: 300% !important;
    }

    .m-radio-nominations {
      display: inline-block;
      position: relative;
      width: 1.8em !important;
      height: 1.8em !important;
      font-size: 300% !important;
      margin-right: 0.5em;
    }


    div.nomination-select-mobile > select{
      /*
      width: 60% !important;
      font-size: 400% !important;
      */
      width: 80% !important;
      font-size: 400% !important;
      height: 80px;
      background: -webkit-linear-gradient(white, #666);
      border: 1px solid #ccc;
      border-radius: 5px;
      color: black;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    }
    

/**************** Login form ********************/

    .m-span-construction, .m-h2
    {
        width: 80% !important;
        font-size: 500% !important;
    }

    .m-h2-small {
      font-size: 400% !important;
    }

    .qComment-90{
      font-size: 400% !important;
      height: 4em !important;
    }

    .m-markFormFio, .m-unn, .login-strong
    {
        width: 80% !important;
        font-size: 500% !important;
    }

    .m-masked-phone
    {
        width: 80% !important;
        font-size: 100% !important;
    }

    .m-font-size-100
    {
        width: 80% !important;
        font-size: 300% !important;
    }

    .m-button-change {
        width: 40% !important;
        height: 100px !important;
        font-size: 300% !important;
    }

    .m-button-back {
        width: 60% !important;
        height: 120px !important;
        font-size: 400% !important;
    }

    #loginFormUnn{
        width: 90%;
        font-size: 500%;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    a.markButoon, a.markButoon:hover, a.markButoon:active {
      font-size: 250% !important;
      border-radius: 20px 20px 20px 20px !important;
      padding-top: 30px;
      padding-bottom: 30px;
    } 

    a.m-type-button {
      font-size: 350% !important;
      width: 80%;
      //height: 15%;
      margin-top: 20px;
      //vertical-align: middle;
    }
    a.markButoon-100, a.markButoon-100:hover {
      font-size: 100% !important;
      min-width: 100px;
    }
    
    div.loginDiv > span {
        font-size: 500%;
        text-decoration: none;
    }

    table.loginForm {
        width: 90%; 
    }

    #loginFormPhone,#loginFormPassw,#userPin {
        font-size: 6em;
        width: 100%;
        height: 2em;
        margin-bottom: 1em;
        padding-left: 0.5em;
    }

    #userPin {
        width: 50%;
    }

    .button-login-next {
        height: 200px;
        width: 80%;
        font-size: 7em;
        cursor: pointer;
    }

    a.button-reg-next {
        height: 80px;
        width: 50%;
        font-size: 3em;
        background: #228B22;
        padding-top: 0.5em;
    }

    .add-chosen-select{
        margin-top: 10%;
        margin-bottom: 10%;
        font-size: 300% !important;
        line-height: 50px !important;
        height: 2em !important;

    }

    /*.login-strong {
        font-size: 4em;
    }*/

/**************** Pagination ********************/

    div.pagination a {
      padding: 25px 50px;
      border: 2px solid #ddd;
      font-size: 5em;

    }

    div.pagination a.left-part,a.right-part{
        display: none;
    }


/*************** Main Menu start ***************/

    div.top-menu-div {
      height: 100px !important;
      top: 0%;
      opacity: 1;
      background-color: white;
      z-index: 9997;
    }

    div.mainDiv {
        margin-top: 100px !important;
        width: 100%;
    }

    .topmenu {
      height: 100%;
      background-color: darkorange;
    }

    .topmenu > li {
        height: 80px;
        margin-top: 30px;
    }

    .topmenu > li > span {
      line-height: 100%;
      font-size: 300%;
      border: 4px solid white;
      border-radius: 10px 10px 10px 10px;
    }

    .topmenu li span:hover { 
      //color: #E6855F;
      color: maroon;
    }

    .submenu {
      background: white;
      border-style: solid;
      border-width: 0px 1px 1px 1px;
      border-color: rgb(72, 61, 139);
      position: absolute;
      left: 0;
      visibility: hidden;
      opacity: 0;
      z-index: 5;
      width: 250px;
      //transform: perspective(600px) rotateX(-90deg);
      //transform-origin: 0% 0%;
      transition: .1s ease-in-out;
      text-align: left;
    }

    .topmenu > li:hover .submenu{
      visibility: visible;
      opacity: 1;
      transform: perspective(600px) rotateX(0deg);
    }

    .submenu li a {
      //color: #7f7f7f;
      font-size: 14px;
      line-height: 36px;
      padding: 0 25px;
      //font-family: 'Kurale', serif;
    }

    .submenu li a:hover {
      //color: #ffffff;
    }

    .submenu li:hover {
      background: #D3D3D3;
    }

    div.bg-main {
      background: rgb(72, 61, 139);
    }

    div.info-div {
      width: 250px;
      float: left;
      text-align: left;
      color: #ffffff;
      margin-left: 2px;
    }

    div.new-messages-div {
      position: fixed;
      width: 20%;
      float: left;
      text-align: left;
      color: #ffffff;
      //margin-left: 2px;
    }

    span.span-new-message {
        display: inline-block;
        background-color: white;
        border-radius: 2px 2px 2px 2px;
        border: 2px solid silver;
        padding: 2px 10px 2px 10px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 5px;
        color: black;
    }
    span.span-new-message:hover{
        background-color: #7FFF00;
    }

    nav {
      //margin-right: 20%; 
    }

    /* in user mode: */
    div.info-div-user {
      color: #7CFC00;
      width: 100%;
      float: none;
      margin-left: 0px;
    }

    /* in user mode: */
    nav.nav-user {
      margin-right: 0%; 
    }

    img.help-button {
        height: 30px;
        vertical-align: middle;
        margin-top: -5px;
    }
    
    img.m-help-button{
        width: 100px !important;
        height: 100px !important;
    }

    img.m-help-button {
        height: 80px;
    }

    img.debug-button {
        height: 30px;
        //border: 2px solid #473c8b;
        //vertical-align: middle;
        margin-top: 5px;
        margin-right: 5px;

    }

    img.help-button:hover{
      //border: 2px solid white;
    }

/*************** Main Menu end ***************/    
   

   .m-a-fio-link, .m-a-fio-link:hover{
      width: 90% !important;
      border: 5px solid darkorange !important;
      background-color: orange !important;
      border-radius: 50px 50px 50px 50px !important;
      margin-top: 1% !important;
      display: inline-block;
      font-size: 400% !important;
      //font-family: 'Kurale', serif;
      min-height: 100px;
      line-height: 100px;
      vertical-align: middle;
    }
    .m-a-fio-link{
      color: white;
    }

    span.m-subs-count, span.m-subs-count:hover{
        display: inline-block;
        //width: 90% !important;
        font-size: 300% !important;
        font-weight: bold;
        color: grey;
        border: 5px solid darkorange;
        border-top: 0px;
        background-color: silver !important;
        border-radius: 0px 0px 50px 50px !important;
        padding: 0px 20px 0px 20px;
        height: 120px;
        line-height: 120px;
        width: 80%;
        vertical-align: middle;
    }

 
/*************** Logos, titles***************/     

    .img-logo1{
      width: 30%;
      vertical-align: middle;
    }

    .img-logo2{
      width: 30%;
      vertical-align: middle;
    }

    .img-logo3{
      width: 30%;
      vertical-align: middle;
    }

    .font-title {
      display: inline-block;
      width: 100%;
      font-family: 'Kurale', serif;
      color: DarkOrange;
      font-size: 2em;
      padding: 0px 5px 0px 5px;
      text-shadow: 1px 1px 1px black, 0 0 0 orange;
      text-align: center;
    }


    /********************** WindowBox mobile *************************/

    .dlg-main{
      position: absolute;
      left: 0px !important;
      top: 0px !important;
      border-color: darkorange !important;
      height: 100% !important;
      width: 100% !important;
      border: 0px !important;
    }

    .dlg-header{
      background-color: darkorange !important;
    }

    .dlg-title{
      font-size: 300%;
    }

    .a-help-titles{
       font-size: 100% !important;
    }

    .dlg-content{
      font-size: 300%;
      height: 95% !important;
    }

    .btn-exit{
      width: 90px !important;
      height: 90px !important;
    }

    table.usersMarkTable{
      font-size: 80% !important;
    }

    table.usersMarkTable-100 td{
      font-size: 80% !important; 
    }
    table.usersMarkTable > a{
      font-size: 50% !important;
    }
    table.m-commons-list-table td{
     font-size: 300% !important;  
    }

} /* media end*/