@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@400;700&display=swap');
  @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

	html,
	body {
		height: 100%;
	}
	body {
		display: flex;
		align-items: center;
		padding-top: 40px;
		padding-bottom: 40px;
		background: rgb(99,106,112,1);
		background: radial-gradient(circle, rgba(131,139,146,1) 0%, rgba(99,106,112,1) 100%);
	}
	.form-signin {
		width: 100%;
		max-width: 480px;
		padding: 15px;
		margin: auto;
	}
	.cb, .cb_light{
      width: 24px;
      height: 24px;
      border-radius: 5px;
      transition: all 0.2s linear;
      cursor: pointer;
      border: 0;
    }
    .cb_light{
      background: #e2e2e2;
    }
	.cb{
      background: #4E5558;
    }
    .cb_checked{
      background: url('/images/check.png');
    }
    .h5{
    	font-family: Rowdies;
    	font-size: 2rem;
    }
    .text-chalk{
    	color: #e2e2e2;
    }
    .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #606d71;
            opacity: 1; /* Firefox */
			}

			.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
			            color: #606d71;
			}

			.form-control::-ms-input-placeholder { /* Microsoft Edge */
			            color: #606d71;
			 }
    .form-control{
        border-radius: 0.5rem;
        color: #e2e2e2;
        padding: 0.9rem 1rem;
    }

    .form-control-dark{
        background-color: #384043;
        border: 2px solid #384043;
    }
    .form-control-dark:focus{
        color: #e2e2e2;
        background-color: #222b2e;
        border: 2px solid #45b9ff;
    }
    .fg{
    	color: #45b9ff;
    	text-decoration: none;
    }
    .fg:hover{
    	color: #afccde;
    }

    .btn-dark-sm{
        color: #e2e2e2;
        border: 2px solid #e2e2e2;
        background: #222b2e;
        font-size: 1rem;
        padding: 0.25rem;
    }

    .btn-dark{
        color: #e2e2e2;
        border: 2px solid #e2e2e2;
        background: #4e5558;
        padding: 8px 25px;
        font-size: 1.1rem;
    }
    .btn-dark-sm:hover, .btn-dark:hover{
        color: #e2e2e2;
        border: 2px solid #45b9ff;
        background: #222b2e;
    }
    .btn-dark-sm:active, .btn-dark:active{
        color: #222b2e;
        border: 2px solid #e2e2e2;
        background: #e2e2e2;
    }


	#logo{
		animation: fill 0.5s ease forwards 2.5s;
	}
	#logo path:nth-child(1){
		stroke-dasharray: 560px;
		stroke-dashoffset: 560px;
		animation: line-anim 2s ease forwards;
	}
	#logo path:nth-child(2){
		stroke-dasharray: 371px;
		stroke-dashoffset: 371px;
		animation: line-anim 2s ease forwards 0.3s;
	}
	#logo path:nth-child(3){
		stroke-dasharray: 410px;
		stroke-dashoffset: 410px;
		animation: line-anim 2s ease forwards 0.6s;
	}
	#logo path:nth-child(4){
		stroke-dasharray: 410px;
		stroke-dashoffset: 410px;
		animation: line-anim 2s ease forwards 0.9s;
	}
	@keyframes line-anim {
		to {
			stroke-dashoffset: 0;
		}
	}
	@keyframes fill {
		from{
			fill: transparent;
		}
		to{
			fill: #00FFFF;
		}
	}
	@keyframes swoosh {
		from {
			width: 0%;
		}
		to {
			width: 100%;
		}
	}

	.show_icon{
        position: absolute;
        right: 0;
        padding-top: 43px;
        border: none;
        background-color: transparent;
        padding-right: 65px;
    }