@font-face {
		  font-family: byekan;
		  src: url(../font/iranyekanwebbold.cfb6e26c.woff2);
		  font-weight: bold;
		}
        body
        {
			font-family: byekan, sans-serif;
			background: linear-gradient(78deg,#00b9cc 20%,#06a5e2 80%);
            background-image: url('../img/background.png');
            background-repeat: round;
            color:white;
            direction: rtl;
			margin: 0;
        }
	

        h1
        {
            font-size:24px;
        }

        hr
        {
            border:none;
            height:1px;
            background:white;
            opacity:0.4;
        }

        input[type="text"], input[type="button"], input[type="password"], select {
			font-family: byekan;
			border: 1px solid #eee;
			font-size: 1.4em;
			padding: 0.4em;
			border-radius: 6px;
			margin: 10px auto;
			text-align: center;
			background: #fffffff2;
			display: table;
			direction: ltr;
			width: 68%;
        }

        header
        {
            position: relative;
			background: #ffffff52;
			padding: 1px 16px 1px 0px;
			border-bottom: 1px solid #ffffff9e;
        }

        footer
        {
            position:absolute;
            bottom:12;
        }

        label {
            margin: 4px;
        }

        .button
        {
            color: #00a8ff;
        }
        .main-container
        {
            max-width: 100%;
			padding: 16px;
        }
        .device-type {
            display: table;
            margin:auto;
            background: #fffffff2;
            padding: 16px;
            border-radius: 10px;
            border: 1px solid #fff;
            min-height: 20px;
            max-width: 200px;
            margin-bottom: 16px;
            margin-top: 4px;
        }
		
		
		select:hover{
			background:#cde4f7;
			border:1px solid #41c9ff;
		}

		select:focus {
				-webkit-box-shadow: 0 0 3px 1px #7cdaff;
				-moz-box-shadow: 0 0 3px 1px #7cdaff;
				box-shadow: 0 0 3px 1px #7cdaff;
			}
			select:before{
				content: "▼";
			}
		option{
			background:#fff;
			border-color:#41c9ff;
			border-radius:2px;
			line-height: 18px;
			outline:none;
			-webkit-box-shadow: 0 0 3px 1px #c00;
			-moz-box-shadow: 0 0 3px 1px #c00;
			box-shadow: 0 0 3px 1px #c00;
		}
		option:focus{
			-webkit-box-shadow: 0 0 3px 1px #7cdaff;
				-moz-box-shadow: 0 0 3px 1px #7cdaff;
				box-shadow: 0 0 3px 1px #7cdaff;
		}
		
		.switch
		{
			display:inline-block;
		}
		
		.switch > span
		{
			color:white;
			margin-bottom:5px;
			display:block;
			text-align:center;
		}
		
		.switch-content 
		{
			background:#ffffffd1;
			height:105px;
			width:105px;
			border-radius:30%;
			align-items:center;
			display:flex;
			margin:auto;
			color:gray;
			font-family: system-ui;
		}
		
		.switch-content > div
		{
				background:white;
				display:flex;
				width:80px;
				height:80px;
				margin:auto;
				text-align:center;
				border-radius:50%;
				align-items:center;
				justify-content:center;
				line-height:0;
				font-size:24px;
				-webkit-box-shadow:0px 7px 11px 0px rgba(0,0,0,0.07);
				-moz-box-shadow:0px 7px 11px 0px rgba(0,0,0,0.07);
				box-shadow:0px 7px 11px 0px rgba(0,0,0,0.07);
		}
		
		.switch-content > div:active
		{
			-webkit-box-shadow:0px 1px 2px 3px rgba(0,0,0,0.1);
			-moz-box-shadow:0px 1px 2px 3px rgba(0,0,0,0.1);
			box-shadow:0px 1px 2px 3px rgba(0,0,0,0.1);
			opacity:.8
		}
		
		.switch > div > div::after {
			/*content:"OFF";*/
		}
		
		.sts-on > div
		{
			color:#01bded;
		}
		
		.sts-on > div > div::after
		{
			content:"ON";
		}
	
		.switch-content > div > span
		{
			position:absolute;
			margin-bottom:62px;
		}
		
		.col
		{
		margin-top:30px;
			width:49%;
		}
		
		.credit-inc{
			background: #ff4e4e;
			color: white;
			font-size: 21px;
			border: 0;
			border-radius: 7px;
			padding: 10px;
			font-family: 'byekan';
		}
		
		.credit-inc::before
		{
			content: "+";
			color: red;
			background: white;
			border-radius: 6px;
			height: 27px;
			width: 27px;
			display: inline-block;
			font-weight: bold;
			margin-left: 7px;
			font-family: monospace;
		}
		
		.credit-get{
			float: left;
			margin-top: 13px;
			text-decoration: underline;
			font-size: 19px;
		}
		
		.credit-get::before
		{
			content: "?";
			color: white;
			font-weight: bold;
			margin-left: 7px;
			font-family: monospace;
			text-decoration:none;
			display: inline-block;
		}
		
		.divblock
		{
			background: rgba(255,255,255,0.8);
			border-radius: 8px;
			color: #444;
			padding: 8px;
		}
		h4
		{
			margin:0;
		}
		
		.setting-input
		{
			width: 100% !important;
			border: 1px solid #557ddb !important;
			
		}
		
		.toggle-container
		{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 13px;
		}
		
		.sub-container
		{
			background: #ffffff99;
    padding: 18px 34px;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
	margin-bottom: 8px;
		}
		
		.alarm-button
		{
			    background: #777;
    color: white;
    font-size: 21px;
    border: 0;
    border-radius: 15px;
    padding: 7px 10px;
    font-family: 'byekan';
    width: 100%;
    margin: 0 7px;
	
-webkit-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.4);
box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.4);
		}
		
		.alarm-button > div 
		{
border-bottom: 2px solid #ffffff55;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
		}
		
		.alarm-button > div  > img {
			filter: invert(100%);
		}
		
		.info-container
		{
    background: #ffffff99;
    padding: 11px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
		}