html, body{
	/*background-color: #d6e2e7;*/
	background-color: #f4f4f4;
	height:100%;
    font-family: 'Open Sans', sans-serif;
	overflow:hidden;
     }

	table, th, td {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        border: 0px solid black;
    }

    table {
        border-collapse: collapse;
        margin: 0 auto;
        width:70%;
    }
        
    .button {
    	background-color: #0086b3;
    	font-size: 16px;
    	color: white;
    	padding: 5px 20px;
    	margin: 4px 0;
    	border: none;
    	cursor: pointer;
    	width: 100%;
    }

    .button2 {
    	background-color: #35475F;
    	font-size: 16px;
    	color: white;
    	padding: 5px 20px;
    	margin: 4px 0;
    	border: none;
    	cursor: pointer;
    	width: 100%;
    }

    .button4 {
        display: inline-block;
    	border: none;
    	color: white;
    	padding: 7px;
    	text-align: center;
    	text-decoration: none;
   	    font-size: 16px;
    	cursor: pointer;
        border-radius: 50%;
        width: 30px;
        height:30px;
        margin-left:4px
    }

    .button_ch {
        display: inline-block;
    	border: none;
    	color: white;
    	padding: 0px;
    	text-align: center;
    	text-decoration: none;
   	    font-size: 10px;
    	cursor: pointer;
        border-radius: 50%;
        width: 25px;
        height:25px;
        margin:0 0 0 0;
    }

    .button:hover, .button2:hover, .button4:hover, .button_ch:hover, .cancelbtn:hover {
    	opacity: 0.8;
    }
    
    ::placeholder{
	font-weight:normal;
	font-size:12px;    
    }

    /* Extra styles for the cancel button */
    .cancelbtn {
    	background-color: darksalmon;
    	font-size: 16px;
    	color: white;
    	padding: 10px 20px;
    	margin: 8px 0;
    	border: none;
    	cursor: pointer;
    	width: 100%;
    }

    .containerx {
        padding: 10px 20px;
     }

    input[type=text], input[type=password]{
        width: 100%;
        font-size:16px;
        height:1.8em;
        font-weight:regular;
        padding: 1px 20px; /* a beleírt szöveg teteje+alja, ill. bal+jobb oldal*/
        margin: 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    select{
        width: 100%;
        height:1.8em;
    	padding: 1px 4px;
    	margin: 0 1em;
        font-size: 16px;
        border-radius: 0px;
    	box-shadow:0;
    	background-color:#fefefe;
        display: inline-block;
        border: 1px solid #ccc;
    	cursor:pointer;
    }
    
   .modal {  /* The Modal (background) */
    	display: none; /* Hidden by default */
    	position: fixed; /* Stay in place */
    	z-index: 1; /* Sit on top */
    	left: 0;
    	top: 0;
    	width: 100%; /* Full width */
    	height: 100%; /* Full height */
    	overflow: auto; /* Enable scroll if needed */
    	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    	padding-top: 60px;
	}

    .modal-content { /* Modal Content/Box */
    	background-color: #fefefe;
    	font-size:14px;
    	margin: 0 auto auto auto; /* 5% from the top, 15% from the bottom and centered */
    	border: 1px solid #888;
    	width: 70%; /* Could be more or less, depending on screen size */
    }

    /* Add Zoom Animation */
    .animate {
    	-webkit-animation: animatezoom 0.6s;
    	animation: animatezoom 0.6s
    }

    @-webkit-keyframes animatezoom {
    	from {-webkit-transform: scale(0)} 
    	to {-webkit-transform: scale(1)}
    }
    
    @keyframes animatezoom {
    	from {transform: scale(0)} 
    	to {transform: scale(1)}
    }

    .xcheckbox-custom, .xradio-custom {
    	opacity: 0;
    	position: absolute;   
    }

    .xcheckbox-custom, .xcheckbox-custom-label, .xradio-custom, .xradio-custom-label {
    	display: inline-block;
    	vertical-align: middle;
    	margin: 0px 2px;
    	cursor: pointer;
     	font-size:14px;
   }

    .xcheckbox-custom-label, .xradio-custom-label {
    	position: relative;
    	font-weight:bold;
    }

    .xcheckbox-custom + .xcheckbox-custom-label:before, .xradio-custom + .xradio-custom-label:before {
    	content: '';
    	background: #fff;
    	border: 2px solid #ddd;
    	display: inline-block;
    	vertical-align: middle;
    	width: 20px;
    	height: 20px;
    	padding: 2px;
    	margin-right: 2px;
    	text-align: center;
    }

    .xcheckbox-custom:checked + .xcheckbox-custom-label:before {
    	box-shadow: inset 0px 0px 0px 4px #fff;
    	background: #0086b3;
    	color: #fff;
    }

    .xradio-custom + .xradio-custom-label:before {
    	border-radius: 50%;
    }

    .xradio-custom:checked + .xradio-custom-label:before {
    	color: #fff;
    	background: #0086b3;
    	box-shadow: inset 0px 0px 0px 4px #fff;
    }

    .xcheckbox-custom:focus + .xcheckbox-custom-label, .xradio-custom:focus + .xradio-custom-label {
  	outline: 1px solid #ddd; /* focus style */
    }

    #first {
        width:50%;
        display:block;
        float:right;
        overflow:auto;
       // position:absolute;
        top:2.5em;
        bottom:0px;
    }
    #second {
        width:50%;
        display:block;
        float:left;
        overflow:auto;
        //position:absolute;
        top:2.5em;
        bottom:0px;
    }

    #harmadik {
        width:50%;
        display:block;
        float:left;
        overflow:auto;
    }

      .panelek {
       height: calc(100% - 2.5em);
    }

    #b1{
        background-image: url('Edit3_feher.png');   
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #0086b3; /* kék */
    }
    #b2{
        background-image: url('add1w.png');   
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #0086b3; /* kék */
    }
    #b3{
        background-image: url('delete_feher.png');   
        //background-image: url('remove1w.png');   
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #4CAF50; /* Green */
    }
    #b4{
        background-image: url('filled_filter_white.png');   
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #0086b3; /* kék */
    }
    
    #bch{
        background-image: url('boritek2.png');   
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #0086b3; /* kék */
    }
    #b5{
        background-image: url('print_w.png');   
        background-size: 20px 20px;
        background-position: center;
        background-repeat: no-repeat;
    	background-color: #e600ac; /* lila */
    }
    
    /*@media screen and (max-width: 800px) {
        //#fsz{display:none;}
        .thnw{white-space: normal;}
        .tnevno{white-space: normal;}
    }

    @media screen and (min-width: 801px) {
        .thnw{white-space: nowrap;}
        .tnevno{white-space: nowrap;}
    }

    @media screen and (max-width: 600px) {
    #fsz2{display:none;}
    #b_div3{margin-right:0}
    .trespp{display:table-cell}
    .modal-content{width: 100%}
    .trno{display:none}
    .tnevno{display:none}
    }

    @media screen and (min-width: 601px) {
    #b_div3{margin-right:3em}
    .trespp{display:none}
    }*/
    @media screen and (min-width: 601px) {
        #szuresdiv{margin-left:2em}
    }

    @media screen and (max-width: 600px) {
        #ccc{display:none}
        select{margin:0 1px}
        #szuresdiv{margin-left:1px}
        #nyomt_div{display:none}
        #torol_div{display:none}
        #sarga_div{display:none}
        .modal-content{width: 100%}
}