@media screen and (min-width : 500px) {

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    div.menu {
        background: rgb(255, 255, 255, 1);
    }


    h1 {
        padding-top: 10px;
        color: #5F7883;
        font-size: 30px;
        pointer-events: none;
        font-family:sans-serif;
        margin-left: 35px;
    }
    .input {
        border-bottom: 1px solid #d9d9d9;
        padding: 5px;
        margin-top:25px;
    }
    input {
        width: 100%;
        border: none;
        outline: 0;
        color: #333;
        font-size: 19px;
        background: transparent;
    }
    #footer {
        width: 160px;
        margin: 0 auto;
        padding: 30px 0;
    }
    #footer span {
        font-size: 17px;
        color: #5c7883;
        display: block;
        margin-top: -21px;
        margin-left: 25px;
    }
    #footer input {
        width: 20px;
        height: 20px;
    }
    #login {
        padding: 30px;
        width: 350px;
        height: 350px;
        background: #fff;
        border-radius: 25px;
        margin: 0 auto;
        margin-top: 200px;
    }
    #register {
        padding: 30px;
        background: #fff;
        border-radius: 25px;
        margin: auto;
        width: 90%;
        max-width: 600px; 
    }

    #register div.input {
        margin-top: 5px;
    }

    #register input {
        font-size:1rem;
    }

    #fundo {
        background-image: url('https://cdn.pixabay.com/photo/2018/03/28/06/10/field-3268388_960_720.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #home{
        background-color: rgba(78, 78, 78, 0.541);
        height: 100%;

    }
    .app-icon{
        border-radius: 20%;
        width: 6rem;
        height: 6rem;
        object-fit: contain;
        padding: 5%;
    }
    .badge-item{
        position: absolute;
        top:-1%;right:10%;
    }

    .bs-canvas-overlay {
   		opacity: 0.85;
		z-index: 1100;
	}

	.bs-canvas {
		top: 0;
		z-index: 1110;
		overflow-x: hidden;
		overflow-y: auto;
		width: 330px;
		transition: margin .4s ease-out;
		-webkit-transition: margin .4s ease-out;
		-moz-transition: margin .4s ease-out;
		-ms-transition: margin .4s ease-out;
	}

	.bs-canvas-left {
		left: 0;
		margin-left: -330px;
	}

	.bs-canvas-right {
		right: 0;
		margin-right: -330px;
	}
    .sidebar-link {
        padding: 10px 0;
    }


}


[data-toggle="collapse"]:after {
        display: flex;
        font-family: 'Font Awesome 5 Pro';
        font-size: inherit;
        text-rendering: auto;
        content: "\f103";
        font-size: 1rem;
        color: #183e70;
        transform: rotate(0deg);
        transition: all linear 0.25s;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        height: 100%;
        margin-bottom: auto;
        margin-top: auto;
    }

    [data-toggle="collapse"].collapsed:after {
        transform: rotate(90deg);
    }
/*
///////////////////
MOBILE CSS
///////////////////
*/
@media screen and (max-width:499px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    div.menu {
        background: rgb(255, 255, 255, 1);
    }

    h1 {
        padding-top: 10px;
        color: #5F7883;
        font-size: 30px;
        pointer-events: none;
        font-family:sans-serif;
        margin-left: 35px;
    }
    .input {
        border-bottom: 1px solid #d9d9d9;
        padding: 5px;
        margin-top:25px;
    }
    input {
        width: 100%;
        border: none;
        outline: 0;
        color: #333;
        font-size: 19px;
        background: transparent;
    }
    #footer {
        width: 160px;
        margin: 0 auto;
        padding: 30px 0;
    }
    #footer span {
        font-size: 17px;
        color: #5c7883;
        display: block;
        margin-top: -21px;
        margin-left: 25px;
    }
    #footer input {
        width: 20px;
        height: 20px;
    }
    #login {
        padding: 30px;
        background: #fff;
        border-radius: 25px;
        margin: 0 auto;
        margin-top: 100px;
        width: 90%;
        max-width:400px;
    }

    #register {
        padding: 30px;
        background: #fff;
        border-radius: 25px;
        margin: auto;
        width: 90%;
        max-width: 600px; 
    }

    #register div.input {
        margin-top: 5px;
    }

    #register input {
        font-size:1rem;
    }

    #fundo {
        background-image: url('https://cdn.pixabay.com/photo/2018/03/28/06/10/field-3268388_960_720.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #home{
        background-color: rgba(78, 78, 78, 0.541);
        height: 100%;

    }

    .app-icon{
        border-radius: 20%;
        /* background-color: #d9d9d9; */
        width: 6rem;
        height: 6rem;
        object-fit: contain;
        padding: 5%;
    }
    
    .badge-item{
        position: absolute;
        top:-1%;right:10%;
    }

    .bs-canvas-overlay {
   		opacity: 0.85;
		z-index: 1100;
	}

	.bs-canvas {
		top: 0;
		z-index: 1110;
		overflow-x: hidden;
		overflow-y: auto;
		width: 330px;
		transition: margin .4s ease-out;
		-webkit-transition: margin .4s ease-out;
		-moz-transition: margin .4s ease-out;
		-ms-transition: margin .4s ease-out;
	}

	.bs-canvas-left {
		left: 0;
		margin-left: -330px;
	}

	.bs-canvas-right {
		right: 0;
		margin-right: -330px;
	}
    .sidebar-link {
        padding: 10px 0;
    }

}