/**************** ПК *******************/
@media screen and (min-width:800px){

  .vbox {
    display: flex;
	flex-direction: row;
	justify-content: center;
    margin: 3px;
    padding: 0px;
    background: #fff; 
    box-sizing: border-box;
  }

  .vbox div{
    flex: 1 1 auto;
    display: inline-block; 
    border: 1px solid rgba(0,0,0,.1);
    box-sizing: border-box;
  }

  .vleft{border-top-left-radius: 2px;
    border-bottom-left-radius: 2px; }

  .vright{border-top-right-radius: 2px;
    border-bottom-right-radius: 2px; }

  .vbox a{
    display: block;
    color:#636363;
    padding: 10px 0px;
  }

  .vsel {background: #455a64;}
  .vsel a{color: #fff;}


  .str{
    vertical-align: top;
    }

  .box_one {
    display: inline-block;
  }

  .box {
  	box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,.1);
    margin: 3px;
    border-radius: 2px;
    padding:10px;
    display: block;
    vertical-align:top;
  }

  .main_content {
    padding-top: 62px;
  }

  .box_right_td {
    margin-bottom: 42px;
    margin-left: 300px;
  }

  
  .gamburger {
    display: none;
  }

  
  .box_left_td {
    background: #37474f;
    position: fixed;
    left: 0px;
    top: 60px;
    bottom: 40px;
    display: inline-block;
    overflow-y: scroll;
    width: 300px;
  }
  
  .box_left_td::-webkit-scrollbar {width: 2px;}
  .box_left_td::-webkit-scrollbar-track {background: #fff;}

  .box_left_td::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 1px;
  }
  
  .box_left_td::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,.5);}
  
  .box_left_td .box{
    background: none;
    border: none;
    margin-top: 10px;
    padding:0px;
  }

    .box_left_plus {
  display: none;
  }
    
  .leftarea {width: 260px;}

  .p20 {display: inline-block; 
  width: calc(20% - 8px);}
  .p30 {display: inline-block; 
  width: calc(30% - 8px);}
  .p40 {display: inline-block; 
  width: calc(40% - 8px);}
  .p45 {display: inline-block; 
  width: calc(45% - 8px);}
  .p50 {display: inline-block; 
  width: calc(50% - 8px);}
  .p60 {display: inline-block; 
  width: calc(60% - 8px);}
  .p70 {display: inline-block; 
  width: calc(70% - 8px);}
  .p80 {display: inline-block; 
  width: calc(80% - 8px);}
  .p95 {display: inline-block; 
  width: calc(95% - 8px);}
  .p100 {display: block;}

  .select{
  box-sizing: border-box;
  overflow: hidden;  
  background:white;
  border:1px solid #e5e5e5;
  color:#5B5B5B;
  border-radius: 5px;
  display: inline-block;
  margin: 3px;
  width: 200px;
  padding: 3px;
  text-align: center;
  }

  .select select{
  border: none;
  border-radius: 0px;
  }
  .select select:hover{
  border: none;
  
  cursor: pointer;
  }

  .select:hover{
    cursor: pointer;
    
    transition: all .2s; 
  }
  .select:active{
    
    transition: all .2s;   
  }

  .inline{
  width: 40%;
  display: inline-block;
  text-align: center;
  }
  
  .intab{
    width: 100%;
    
  }
  
  .intab td{
    text-align: left;
    vertical-align: middle;
  }

  
  .intab td.left{
    padding-right: 2px;
    text-align: right;
    width: 30%;
  }

  #topmenu {
    vertical-align: middle;
    height: 30px;
    position: absolute;
    top: 14px;
    right: 10px;
    height: 28px;
  }

  .title .head-text{
    position: absolute;
    top: 10px;
    left: 60px;
    color: #fff;
    line-height: 20px;
  }

  #topmenu a {
    background: #FFFFFF;
    color: #37474f;
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    margin-left: 0px;
    vertical-align: middle;
    border-radius: 2px;
    margin-left: 2px;
  }

  #topmenu a:hover {
    transition: all .2s; 
    -webkit-transition: all .2s; 
    background:#37474f;
    color: #FFFFFF;
  }

  #topmenu a:active {
    transition: all .2s; 
    -webkit-transition: all .2s; 
  }

  .topser{
  display: inline-block;
  margin: 0px;
  height: 40px;
  padding: 0px;
  -o-transition: transform .5s linear;
  -ms-transition: transform .5s linear;
  -moz-transition: transform .5s linear;
  -webkit-transition: transform .5s linear;
  transition: transform .5s linear;
  }

  .topser input[type~="text"]{
    position: fixed;
    top: 11px;
    right: 320px;  
    background:white;
    border:1px solid #e5e5e5;
    color:black;
    border-radius: 2px;
    width: 200px;
    height: 33px;
    display: none;
    -o-transition: transform .5s linear;
    -ms-transition: transform .5s linear;
    -moz-transition: transform .5s linear;
    -webkit-transition: transform .5s linear;
    transition: transform .5s linear;
  }

  .topser input[type~="text"]:hover{
  border:1px solid #636363;
  }

  .topser input[type="submit"]{
    margin: 0px;  
    background:white;
    color:black;
    border-radius: 3px;
    padding: 5px 12px;  
    display: none;
  }

  .topser:hover > input[type~="text"], .topser > input[type~="text"]:focus{
    display:inline-block;
    animation: slide .5s;
    -o-transition: transform .5s linear;
    -ms-transition: transform .5s linear;
    -moz-transition: transform .5s linear;
    -webkit-transition: transform .5s linear;
    transition: transform .5s linear;
  }
  
	.wlist-main {
		display: table;
		width: 100%;
	}
	
	.wlist-main .wlist:nth-child(2n) {
		background: #f4f4f4;
	}
  
	.wlist{
		display: table-row;
		text-align: left;
	}

    .wlist span:first-child{
		border-radius: 5px 0px 0px 5px;
    }
    
    .wlist span:last-child{
		border-radius: 0px 5px 5px 0px;
    }
    
    a.wlist {
    	color: #696969;	
    }
    
    a.wlist:hover {
		background:#e5e5e5;	
	}
	
	.wlist-cell {
		display: table-cell;
		box-sizing: border-box;
		vertical-align: middle;
		border:1px solid #e5e5e5;
		color:#5B5B5B;
		padding: 0px 4px;
		height: 30px;
	}

	.wlist .number, .wlist .time, .wlist .master{
		white-space: nowrap;
	}

	.wlist .tel-number{
		min-width: 120px;
	}

    .wlist .name{
        color: #546e7a;	
    	font-weight: bold;
    }

    .wlist .icons{
    	color: #546e7a;	
    	font-weight: bold;
    }
    
    .wlist .icons span{
    	display: inline-block;
    }
    

	.boxLine {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.boxLine div{
		flex: 1 1 auto;
	}
}

	
	/****Карточки****/
	.boxLineTile {
		border-radius: 3px;
    	background-color: #279FE0;
    	color: #FFFFFF;
    	margin: 15px;
	}
	.boxLineTile-head {
	    padding: 5px 8px;
	    
	    background-color: #1E91CF;
	    color: #FFF;
	    text-align: left;
	}
	
	.boxLineTile-span {
	    float: right;
	    color: #FFF;
	    text-align: right;
	}
	
	.boxLineTile-body {
	    padding: 15px;
	    color: #FFFFFF;
	    line-height: 48px;
	    font-size: 42px;
	}
	/****Карточки****/

/**************** ТЕЛЕФОН *******************/
@media screen and (max-width:800px) { 
  .vbox {
    display: flex;
	flex-direction: row;
	justify-content: center;
    margin: 3px;
    padding: 0px;
    background: #fff; 
    box-sizing: border-box;
  }

  .vbox div{
    flex: 1 1 auto;
    display: inline-block; 
    border: 1px solid rgba(0,0,0,.1);
    box-sizing: border-box;
  }

  .vleft{border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important; }

  .vright{border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important; }

  .vbox div a{
    display: block;
    padding: 10px;
  }

  .vsel {background: #636363 !important;}
  .vsel a{color: #fff !important;}
    
   .box {
    background: #FFFFFF;
    display: block;
    border: 1px solid rgba(0,0,0,.1);
    margin: 3px;
    border-radius: 2px;
    padding:10px;
    vertical-align:top;
   }
    
   .box_one, .box_right_td{
     display: block;
   }

  .main_content {
     padding-top: 60px;
  }

   .gamburger {
     display: inline-block;
     line-height: 75px;
     height: 60px;
     padding-left: 5px;
     cursor: pointer;
   }
   
	.burger-rotate i{
	  -webkit-transition: all 500ms ease-in-out;
	  transition: all 500ms ease-in-out;
	  -webkit-transform: rotate(-90deg);
	  transform: rotate(-90deg);
	}
   
   .logo {display: none;}
   
   .box_left_td{
	   	display: none;
	   	position: fixed;
	   	top: 60px;
	   	bottom: 0px;
	   	overflow-y: scroll;
	   	width: 80%;
	    background: #37474f;
	    z-index: 1000;
    }
    
    .nomobile{
    display: none;       
    }    
     
  .cat {
  display: none;
  }
     
  .select{
  	box-sizing: border-box;
    overflow: hidden;  
    background:white;
    border:1px solid #e5e5e5;
    color:#5B5B5B;
    border-radius: 5px;
    display: inline-block;
    margin: 3px;
    width: 200px;
    padding: 3px;
    text-align: center;
  }

  .select select{
  border: none;
  border-radius: 0px;
  }
  .select select:hover{
  border: none;
  
  cursor: pointer;
  }

  .select:hover{
    cursor: pointer;
    
    transition: all .2s; 
  }
  .select:active{
    transition: all .2s;   
  }    

  #topmenu {
    position: absolute;
    top: 12px;
    right: 10px;
    height: 28px;
    transition: all 1s;
    z-index: 1;
  }

  #topmenu a {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,.10);
    color: #455a64;
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin: 0px 2px;
    text-align: center !important;
    border-radius: 2px;
    padding:0px;
    text-align: left;
  }

  .topser{
  display: inline-block;
  margin: 0px;
  height: 40px;
  padding: 0px;
  -o-transition: transform .5s linear;
  -ms-transition: transform .5s linear;
  -moz-transition: transform .5s linear;
  -webkit-transition: transform .5s linear;
  transition: transform .5s linear;
  }

  .topser input[type~="text"]{
    position: fixed;
    top: 12px;
    left: 0px;  
    background:white;
    border:1px solid #e5e5e5;
    color:black;
    border-radius: 2px;
    width: 200px;
    height: 33px;
    display: none;
    -o-transition: transform .5s linear;
    -ms-transition: transform .5s linear;
    -moz-transition: transform .5s linear;
    -webkit-transition: transform .5s linear;
    transition: transform .5s linear;
  }

  .topser input[type~="text"]:hover{
  border:1px solid #636363;
  }

  .topser input[type="submit"]{
    margin: 0px;  
    background:white;
    color:black;
    border-radius: 3px;
    padding: 5px 12px;  
    display: none;
  }

  .topser:hover > input[type~="text"], .topser > input[type~="text"]:focus{
    display:inline-block;
    animation: slide .5s;
    -o-transition: transform .5s linear;
    -ms-transition: transform .5s linear;
    -moz-transition: transform .5s linear;
    -webkit-transition: transform .5s linear;
    transition: transform .5s linear;
  }
  
  
  .title .head-text{
    position: absolute;
    top: 10px;
    left: 60px;
    color: #fff;
    line-height: 20px;
  }
  
  #topmenu span{
    display:none;
  }

  .notice {
    background: red;
    display: inline-block;
    padding: 5px;
    min-width: 16px;
    height: 16px;
    margin-right: 2px;
    text-align: center;
    vertical-align: middle;
    border-radius: 25%;
    color: #FFFFFF;
  }

  
  .intab{
    width: 100%;
    
  }
  
  .intab td{
    text-align: left;
    vertical-align: middle;
  }

  
  .intab td.left{
    text-align: left;
    width: 30%;
  }
  
  .main{

  }

  .foot{
    position: static;
    bottom: 0px;
  }

  .main{
    margin-bottom: 0px;
  }

  .workser input[type="number"]{
  display: inline-block;    
  }
  
	.wlist-main {
		display: block;
	}
	
	.wlist-main .wlist:nth-child(2n) {
		background: #f4f4f4;
	}
	
	.wlist{
		display: block;
		border:1px solid #e5e5e5;
		color:#5B5B5B;
		padding:8px;
		text-align: left;
	}
	
	.wlist span:first-child{
		border: none;
	}
	
	.wlist span:last-child{
		border: none;
	}
	
	a.wlist {
		color: #696969;	
	}
	
	a.wlist:hover {
		background:#e5e5e5;	
	}
	
	.wlist-cell {
		display: inline-block;
		vertical-align: middle;
		color:#5B5B5B;
		padding: 4px;
	}
	
	.wlist .inf, .wlist .device{
		font-weight: bold;
	}
	
	.boxLine {
		display: block;
	}
	
	.boxLine div{
		display: block;
	}
}
/**************** /ТЕЛЕФОН *******************/