@import url('https://fonts.googleapis.com/css?family=Play');

/* 

Screen Resolution Sizes Worldwide

1920×1080 – 17.34%
1600×900 – 5.72%
1440×900 – 7.32%
1366×768 – 29.25%
1280×1024 – 4.51%
1280×800 – 5.27%
-------------------		DESKTOP
Mobile
------------------- 	RESPONSIVE
720×1280 – 5.16%
480x853					Samsung Galaxy Note 5
414×736 – 3.79%			Iphone 8+
375*568					iPhone 5/SE
375x812					iPhoneX
375×667 – 9.58%			iPhone 6-8
375×812 				iPhone 6-8 Plus
360×640 – 41.11%
360x740					Samsung Galaxy S8+
------------------- 	RESPONSIVE
320×480 				iPhone <= 4
320×533					Nexus S 2010
320×534 – 3.46% 		
320×568 – 4.55%			iPhone 5/SE

-------------------	
Tablet
-------------------	
1280×800 – 5.89%
-------------------		DESKTOP 
1024×600 – 2.36%		RESPONSIVE
800×1280 – 2.94%
768×1024 – 57.99%
601×962 – 3.02%
600×1024 – 4.6%
*/



/* ALL SCREENS*/


body {
	font-family: 'Play', sans-serif; 
	font-size: 14px; 
	font-weight: normal; 
	text-decoration: none; 
	color: #000000}
	
table {  
	font-family: 'Play', sans-serif; 
	font-size: 14px;  
	font-weight: normal; 
	text-decoration: none; 
	color: #000000
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

td {
    padding: 4px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

th {
    padding: 4px;
    text-align: left;
    border-bottom: 2px solid #ddd;
	background-color: #FFFFFF
}

tr:hover {
	background-color:#CBCBCB;
}

h3 {  
	font-family: 'Play', sans-serif; 
	font-size: 150%; 
	font-weight: bold; 
	text-decoration: none; 
	color: #000000}
h2 {  
	font-family: 'Play', sans-serif; 
	font-size: 125%; 
	font-weight: bold; 
	text-decoration: none; 
	color: #000000}
h1 {  
	font-family: 'Play', sans-serif; 
	font-size: 110%; 
	font-weight: bold; 
	text-decoration: none; 
	color: #000000}
	
input[type=text], [type=password], [type=number], [type=tel], [type=email], [type=url]  {
    background-color: #FFCC33;
    border-radius: 5px;
    padding: 10px 12px;
    border: 1px solid ##FFCC33;
    font-family: 'Play', sans-serif;
    font-size:110%;
} 
	
textarea {
    padding: 4px 4px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #FFCC33;
	font-family: 'Play', sans-serif;
    font-size:110%;
} 
	
select {
  	background-color: #FFCC33;
 	border-radius: 5px;
  	padding: 10px 12px;
  	border: 1px solid ##FFCC33;
  	font-family: 'Play', sans-serif;
  	font-size:110%;
	cursor:pointer;
}
	
input[type="date"], [type="time"] {
 	background-color: #FFCC33;
  	border-radius: 5px;
  	padding: 10px 12px;;
 	border: 1px solid ##FFCC33;
 	font-family: 'Play', sans-serif;
  	font-size:110%;
	cursor:pointer;
	}
	
input[type="radio"]{
	background-color: #FFCC33;
    width:20px;
    height:20px;                      
    cursor:pointer;}
	 
input[type="checkbox"]{
	background-color: #FFCC33;
    width:20px;
    height:20px;                      
    cursor:pointer;}
	
input[type=button], input[type=submit] {
    background-color: #4CAF50;
    border: none;
	border-radius: 5px;
    color: white;
    padding: 8px 6px;
    font-family: 'Play', sans-serif;
    font-size:150%;
    cursor: pointer;
	}

input[type=reset] {
    background-color: red;
    border: none;
	border-radius: 5px;
    color: white;
    padding: 8px 6px;
    font-family: 'Play', sans-serif;
    font-size:150%;
    cursor: pointer;
}
	
/* skapar ett stoppdtecken som är dimmat */
.stop {
    opacity: 0.8;
    cursor: not-allowed;
}

/* skapar bara dimma */

.dimmad {
    opacity: 0.6;
	
}

/* tar bort text eller objekt inom SPAN */

.tabort {
    display: none;
	
}

/* skapar bara ett stoppdtecken */
.stop2 {
    cursor: not-allowed;
}
	
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
.icon-bar {
    width: 100%;
    background-color: #FC0;
    overflow: auto;
}

/* skapar sliders som checkbox */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #FF6600;
}

input:focus + .slider {
  box-shadow: 0 0 1px gray;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Mobile Styles budget*/
@media only screen and (max-width: 480px) {

body {
    background-color: #FFFFFF; 
}	
}

/* Desktop Styles */
@media only screen and (min-width: 481px) {

body {
    background-color: #FFFFFF; 
}
}