/*---------------------------------------------------
============== Responsive Layouts ===================
-----------------------------------------------------*/

@media only screen and (min-width: 1440px) and (min-width: 1920px) {
    .plan_text {
        font-size: 24px;
        /*line-height: 122px;*/
        margin: 0% 0%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 4% 0%;
    }
    .push-open {
        left: 3.9%;
    }
    .sidebarFixed {
        width: 3.9%;
    }
    .menu ul {
        margin-left: 28%;
    }
    .event-paln-style {
        width: 27px;
        height: 27px;
    }
    .nav-menu a {
        font-size: 14px;
    }
    .MainIconMenu li {
        padding: 10px 26%;
    }
}

@media only screen and (min-width: 1367px) and (max-width: 1439px) {
    .main-content p {
        font-size: 15px;       
        line-height: 27px;        
    }
    .main-content-title h3 {
        font-size: 22px;       
    }
    .plan_text {
        font-size: 24px;
        /*line-height: 110px;*/
        margin: 3% 0%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 6% 6%;
    }
    .card {
        margin: 10% 0%;
    }
    .card-body {
        padding: 10% 3%;
    }
    .menu {
        width: 19% !important;
    }
    .main-content.push-close {
        left: 19% !important;
        width: 81%;
    }
    .sidebarFixed {
        width: 4.5%;
    }
    .push-open {
        left: 4.5%;
    }
    .menu ul {
        margin-left: 24%;
    }
    .footer-logo {
        left: 4px;
        font-size: 18px;
    }
    .footer-logo img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
    .side_footer {
        margin-left: 22%;
        width: 78%;
    }
    .nav-menu a {
        font-size: 13.5px;
    }
    .MainIconMenu li {
        padding: 10px 26%;
    }
    .details #profile-footer {
        font-size: 13px;
    }
    .user-menu .user-menu-link {
        font-size: 13.5px;
        padding: 10px 15px;
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .main-content-body {
        padding: 5% 5%;        
    }
    .main-content p {
        font-size: 15px;       
        line-height: 27px;        
    }
    .main-content h1 {
        font-size: 35px;      
    }
    .details #profile-name {       
        font-size: 15px;       
    }
    .details #profile-footer {       
        font-size: 13px;       
    }
    .main-content-title h3 {
        font-size: 22px;       
    }
    .card {
        margin: 10% 0%;
    }
    .card-body {
        padding: 10% 3%;
    }
    .plan_text {
        font-size: 24px;
        /*line-height: 102px;*/
        margin: 5% 0%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 6% 6%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 11% 6%;
    }
    .welcome_text {
        font-size: 26px;
    }
    .login_page {
        padding: 0% 3%;
    }
    .account-pages {
        top: 5%;
    }
    .login_btn {
        font-size: 14px;
        padding: 8px 10px;
    }
    .card-body {
        padding: 7% 7%;
    }
    .logo_login {
        padding: 10px;
    }
    .menu {
        width: 20% !important;
    }
    .main-content.push-close {
        left: 20% !important;
        width: 80%;
    }
    .sidebarFixed {
        width: 4.5%;
    }
    .push-open {
        left: 4.5%;
        border-left: 6px solid #ececec;
    }
    .menu ul {
        margin-left: 22.9%;
    }
    .footer-logo {
        left: 4px;
        font-size: 18px;
    }
    .footer-logo img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .side_footer {
        margin-left: 22%;
        width: 78%;
    }
    .nav-menu a {
        padding: 10px 15px !important;
    }
    .user-menu {
        left: 4.3%;
    }
    .menu h5 {
        margin-left: 24%;
        padding: 8px 10px;
    }
    .event-paln-style {
        width: 23px;
        height: 23px;
        margin: auto 26%;
    }
    .close-icon {        
        top: 13px;        
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    .main-content-body {
        padding: 5% 5%;      
    }
    .main-content-title h3 {
        font-size: 20px;        
    }
    .main-content h1 {
        font-size: 32px;       
    }
    .main-content p {
        font-size: 14px;       
        line-height: 25px;        
        margin-bottom: 1.5%;
    }
    .details #profile-name {       
        font-size: 14px;       
    }
    .details #profile-footer {       
        font-size: 12px;      
    }
    .login_left,
    .login_right {
        width: 33.3%;
    }
    .card {
        margin: 6% 0% !important;
    }
    .plan_text {
        font-size: 24px;
        /*line-height: 86px;*/
        margin: 2% 0%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 6% 6%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 3% 0%;
        line-height: 48px;
    }
    .welcome_text {
        font-size: 26px;
    }
    .login_page {
        padding: 0% 3%;
    }
    .account-pages {
        width: 96%;
        margin: 0% 2%;
    }
    .login_btn {
        font-size: 14px;
        padding: 8px 10px;
    }
    .card-body {
        padding: 7% 7%;
    }
    .logo_login {
        padding: 10px;
    }
    .menu {
        width: 24% !important;
        padding-top: 10px;
    }
    .main-content.push-close {
        left: 24% !important;
        width: 76%;
    }
    .sidebarFixed {
        width: 6.3%;
    }
    .push-open {
        left: 6.3%;
        width: 93.7%;
    }
    .sidebarFixed {
        width: 6%;
    }
    .push-open {
        left: 6%;
        border-left: 6px solid #ececec;
    }
    .menu ul {
        margin-left: 25%;
    }
    .footer-logo {
        left: 4px;
        font-size: 18px;
    }
    .footer-logo img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .side_footer {
        margin-left: 25%;
        width: 75%;
    }
    .nav-menu a {
        padding: 10px 15px !important;
    }
    .user-menu {
        left: 5.3%;
    }
    .menu h5 {
        margin-left: 27%;
        padding: 10px 10px;
    }
    .close-icon {        
        top: 14px;       
    }
    .event-paln-style {
        width: 25px;
        height: 25px;
        margin: auto 24%;
    }
}

@media only screen and (min-width: 992px) {
    .help {
        display: block;
        width: 35px;
        position: fixed;
        right: 2.5%;
        bottom: 2.5%;
    }
    .clse {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1023px) {
    .main-content-body {
        padding: 5% 5%;      
    }
    .main-content-title h3 {
        font-size: 18px;        
    }
    .main-content h1 {
        font-size: 30px;       
    }
    .main-content p {
        font-size: 13px;       
        line-height: 25px;        
        margin-bottom: 1.5%;
    }
    .details #profile-name {       
        font-size: 13.5px;       
    }
    .details #profile-footer {       
        font-size: 12px;      
    }
    .login_left,
    .login_right {
        width: 33.3%;
    }
    .card {
        margin: 6% 0% !important;
    }
    .plan_text {
        font-size: 24px;
        /*line-height: 100px;*/
        margin: 5% 0%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 6% 6%;
    }
    .plan_text_right {
        font-size: 24px;
        margin: 11% 0%;
        line-height: 43px;
    }
    .welcome_text {
        font-size: 26px;
    }
    .login_page {
        padding: 0% 3%;
    }
    .account-pages {
        top: 5%;
    }
    .login_btn {
        font-size: 14px;
        padding: 8px 10px;
    }
    .card-body {
        padding: 7% 2%;
    }
    .logo_login {
        padding: 10px;
    }
    .menu {
        width: 26% !important;
    }
    .main-content.push-close {
        left: 26% !important;
        width: 74%;
    }
    .sidebarFixed {
        width: 6.3%;
    }
    .push-open {
        left: 6.3%;
        width: 93.7%;
    }
    .sidebarFixed {
        width: 6%;
    }
    .push-open {
        left: 6%;
        border-left: 6px solid #ececec;
    }
    .menu ul {
        margin-left: 23.9%;
    }
    .footer-logo {
        left: 4px;
        font-size: 18px;
    }
    .footer-logo img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .side_footer {
        margin-left: 23%;
        width: 77%;
    }
    .nav-menu a {
        padding: 10px 15px !important;
    }
    .user-menu {
        left: 4.3%;
    }
    .menu h5 {
        margin-left: 27%;
        padding: 10px 10px;
    }
    .close-icon {        
        top: 14px;       
    }
    .event-paln-style {
        width: 25px;
        height: 25px;
        margin: auto 24%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .main-content-body {
        padding: 5% 5%;       
    }
    .main-content-title {
        padding: 3% 5%;       
    }
    .nav-menu li {
        margin: 1% 0px;       
    }
    #Layer_1 {
        width: 50%;
        margin: 0% 25%;
        float: left;
    }
    .sidebarFixed {
        width: 10%;
    }
    .menu ul {
        margin-left: 10%;
    }
    .plan_text {
        display: none;
    }
    .login_left,
    .login_center,
    .login_right {
        width: 100%;
    }
    .text-muted {
        color: #ffffff!important;
    }
    .moblogo {
        display: block;
    }
    .laplogo {
        display: none;
    }
    .small-po {
        padding: 0px !important;
        margin: auto;
    }
    .card {
        left: 0;
    }
    .small-ma {
        margin: 0px !important;
    }
    .plan_text_right {
        display: none;
    }
    .login_page {
        padding: 0% 8%;
    }
    .leftside_icon_img {
        width: 18px;
        margin-right: 4%;
    }
    .plan_text br {
        display: none;
    }
    .plan_text {
        word-spacing: 0px;
    }
    .plan_text {
        font-size: 24px;
        font-weight: 500;
        margin: 10% 7%;
        text-align: center;
        position: relative;
        z-index: 9;
        /*line-height: 70px;*/
    }
    .logo_login {
        width: 300px;
        margin: auto;
        padding-bottom: 15%;
    }
    .card-body {
        -webkit-box-flex: none;
        -ms-flex: 1 1 auto;
        flex: none;
        padding: 5% 4%;
        padding-top: 5%;
        box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -webkit-box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -moz-box-shadow: 1px -11px 29px 200px rgba(0, 0, 0, 0.75);
    }
    .plan_text_right br {
        display: none !important;
    }
    .plan_text_right {
        position: relative;
        text-align: center;
        font-size: 16px;
        margin: 2% 0%;
    }
    .card {
        position: fixed;
        width: 100%;
        bottom: 0;
        border-radius: 0 !important;
        background-color: #000;
    }
    .welcome_text {
        font-size: 40px;
        color: #fff;
    }
    .emp_text {
        color: #f5f5f5 !important;
        font-weight: 500;
        font-family: "Segoe UI" !important;
        font-size: 25px;
    }
    .login_btn,
    .microsoft_btn {
        font-size: 18px;
    }
    .account-pages .form-control {
        font-size: 16px;
    }
    .loopscroll {
        height: 100vh;
        background-size: auto !important;
        animation-duration: 50s !important;
    }
    .account-pages {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        height: 100vh;
        margin: 0% 0%;
    }
    .button_container:hover {
        opacity: 0.7;
    }
    .button_container.active .middle {
        opacity: 0;
        background: #FFF;
    }
    .button_container span {
        background: #FFF;
        border: none;
        width: 50%;
        position: absolute;
        height: 2px;
        top: 14px;
        left: 24%;
        transition: all 0.35s ease;
        cursor: pointer;
    }
    .overlay {
        position: fixed;
        background: #1abc9c;
        top: 0px;
        left: 0;
        width: 100%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s, visibility 0.35s, height 0.35s;
        overflow: hidden;
    }
    .overlay.open {
        opacity: 0.95;
        visibility: visible;
        height: 100vh;
    }
    .overlay.open .navmenu-col,
    .overlay.open li {
        animation: fadeInRight 0.5s ease forwards;
        animation-delay: 0.35s;
    }
    .overlay.open .navmenu-col:nth-of-type(2),
    .overlay.open li:nth-of-type(2) {
        animation-delay: 0.4s;
    }
    .overlay.open .navmenu-col:nth-of-type(3),
    .overlay.open li:nth-of-type(3) {
        animation-delay: 0.45s;
    }
    .overlay.open .navmenu-col:nth-of-type(4),
    .overlay.open li:nth-of-type(4) {
        animation-delay: 0.5s;
    }
    .overlay.open .navmenu-col:nth-of-type(5),
    .overlay.open li:nth-of-type(5) {
        animation-delay: 0.55s;
    }
    .overlay nav {
        position: relative;
        font-size: 20px;
        font-family: "Varela Round", serif;
        font-weight: 400;
        /*text-align: center;*/
    }
    .overlay .navrow {
        list-style: none;
        padding: 0;
        margin: 0 0 0 25px;
        position: relative;
        height: 100%;
    }
    .overlay .navrow .navmenu-col {
        opacity: 0;
    }
    .overlay .navrow .navmenu-col a {
        display: block;
        position: relative;
        color: #FFF;
        text-decoration: none;
        overflow: hidden;
    }
    .overlay .navrow .navmenu-col ul {
        margin-left: 0;
    }
    .overlay .navrow .navmenu-col ul li {
        display: block;
        padding: 10px 0;
    }
    .overlay .navrow .navmenu-col ul li a {
        font-size: 13px;
    }
    .overlay .navrow .navmenu-col ul li:first-child {
        padding-top: 20px;
    }
    .overlay .navrow .navmenu-col:first-child {
        margin-left: 0;
    }
    .overlay .navrow .navmenu-col:first-child ul li {
        padding: 0;
        margin-bottom: 20px;
    }
    .overlay .navrow .navmenu-col:first-child ul li a {
        font-size: 20px;
    }
    .menu {
        width: 100% !important;
    }
    .button_container {
        position: absolute;
        bottom: 1.5%;
        left: 3.3%;
        height: 42px;
        width: 42px;
        cursor: pointer;
        z-index: 999;
        transition: opacity 0.25s ease;
        background: #000;
        padding: 2%;
        border-radius: 50px;
    }
    .button_container span {
        height: 2px;
        top: 13px;
        left: 26%;
    }
    .button_container span:nth-of-type(2) {
        top: 20px;
    }
    .button_container span:nth-of-type(3) {
        top: 27px;
    }
    .button_container.active .bottom {
        transform: translateY(-7px) translateX(0) rotate(-45deg);
        background: #FFF;
    }
    .button_container.active .top {
        transform: translateY(7px) translateX(0) rotate(45deg);
        background: #FFF;
    }
    .main-content.push-close {
        left: 0% !important;
        z-index: -99;
        width: 100%;
        padding: 5%;
    }
    .side_footer {
        margin-left: 13%;
        width: 87%;
        padding: 3%;
        display: none !important;
    }
    .menu h5 {
        margin-left: 11%;
    }
    .event-paln-style {
        width: 35px;
        height: 35px;
        margin: auto 24%;
    }
    .footer-logo {
        margin: 0px 7px;
    }
    .footer-logo img {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50%;
    }
    .footer-logo {
        margin: 0px 6px !important;
        left: 12%;
        font-size: inherit;
        bottom: 1.5%;
        border: 2.9px solid #02934f;
    }
    .user-menu {
        width: 100%;
        margin-top: 20px;
        left: 0px;
        bottom: 0;
        z-index: 99999;
        position: fixed;
        margin: 0px !important;
    }
    .close-icon {
        display: none;
    }
    .clse {
        position: absolute;
        right: 5%;
        top: 5%;
        background-color: transparent;
        width: 20px;
    }
    .help {
        position: fixed;
        bottom: 2%;
        right: 5%;
        width: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .main-content {
        padding: 5% 0% 0% 0% !important;
        height: 100%;
    }
    .main-content-title {
        padding: 3% 5%;       
    }
    #Layer_1 {
        width: 50%;
        margin: 0% 25%;
        float: left;
    }
    .nav-menu li {
        margin: 1% 0px;
    }
    .main-content-body {
        padding: 5% 5%;
        width: 100%;
        float: left;
    }
    .button_container:hover {
        opacity: 0.7;
    }
    .button_container.active .middle {
        opacity: 0;
        background: #FFF;
    }
    .button_container span {
        background: #FFF;
        border: none;
        width: 50%;
        position: absolute;
        height: 2px;
        top: 14px;
        left: 24%;
        transition: all 0.35s ease;
        cursor: pointer;
    }
    .overlay {
        position: fixed;
        background: #1abc9c;
        top: 0px;
        left: 0;
        width: 100%;
        height: 0%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s, visibility 0.35s, height 0.35s;
        overflow: hidden;
    }
    .overlay.open {
        opacity: 1;
        visibility: visible;
        height: 100vh;
    }
    .overlay.open .navmenu-col,
    .overlay.open li {
        animation: fadeInRight 0.5s ease forwards;
        animation-delay: 0.35s;
    }
    .overlay.open .navmenu-col:nth-of-type(2),
    .overlay.open li:nth-of-type(2) {
        animation-delay: 0.4s;
    }
    .overlay.open .navmenu-col:nth-of-type(3),
    .overlay.open li:nth-of-type(3) {
        animation-delay: 0.45s;
    }
    .overlay.open .navmenu-col:nth-of-type(4),
    .overlay.open li:nth-of-type(4) {
        animation-delay: 0.5s;
    }
    .overlay.open .navmenu-col:nth-of-type(5),
    .overlay.open li:nth-of-type(5) {
        animation-delay: 0.55s;
    }
    .overlay nav {
        position: relative;
        font-size: 20px;
        font-family: "Varela Round", serif;
        font-weight: 400;
        /*text-align: center;*/
    }
    .overlay .navrow {
        list-style: none;
        padding: 0;
        margin: 0 0 0 25px;
        position: relative;
        height: 100%;
    }
    .overlay .navrow .navmenu-col {
        opacity: 0;
    }
    .overlay .navrow .navmenu-col a {
        display: block;
        position: relative;
        color: #FFF;
        text-decoration: none;
        overflow: hidden;
    }
    .overlay .navrow .navmenu-col ul {
        margin-left: 0;
    }
    .overlay .navrow .navmenu-col ul li {
        display: block;
        padding: 10px 0;
    }
    .overlay .navrow .navmenu-col ul li a {
        font-size: 13px;
    }
    .overlay .navrow .navmenu-col ul li:first-child {
        padding-top: 20px;
    }
    .overlay .navrow .navmenu-col:first-child {
        margin-left: 0;
    }
    .overlay .navrow .navmenu-col:first-child ul li {
        padding: 0;
        margin-bottom: 20px;
    }
    .overlay .navrow .navmenu-col:first-child ul li a {
        font-size: 20px;
    }
    .menu {
        width: 100% !important;
    }
    .button_container {
        position: fixed !important;
        bottom: 1.5%;
        left: 2.5%;
        height: 42px;
        width: 42px;
        cursor: pointer;
        z-index: 999;
        transition: opacity 0.25s ease;
        background: #000;
        padding: 2%;
        border-radius: 50px;
    }
    .button_container span {
        height: 2px;
        top: 13px;
        left: 26%;
    }
    .button_container span:nth-of-type(2) {
        top: 20px;
    }
    .button_container span:nth-of-type(3) {
        top: 27px;
    }
    .button_container.active .bottom {
        transform: translateY(-7px) translateX(0) rotate(-45deg);
        background: #FFF;
    }
    .button_container.active .top {
        transform: translateY(7px) translateX(0) rotate(45deg);
        background: #FFF;
    }
    .main-content.push-close {
        left: 0% !important;
        z-index: -99;
        width: 100%;
        padding: 5%;
        overflow: scroll !important;
    }
    .side_footer {
        margin-left: 13%;
        width: 87%;
        padding: 3%;
        display: none !important;
    }
    .menu h5 {
        margin-left: 15%;
    }
    .footer-logo {
        margin: 0px 7px;
    }
    .footer-logo img {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50%;
    }
    .footer-logo {
        margin: 0px 6px !important;
        left: 15%;
        font-size: inherit;
        bottom: 1.5%;
        border: 2.9px solid #02934f;
    }
    .user-menu {
        width: 100%;
        margin-top: 20px;
        left: 0px;
        bottom: 0;
        z-index: 99999;
        position: fixed;
        margin: 0px !important;
    }
    .close-icon {
        display: none;
    }
    .clse {
        position: absolute;
        right: 5%;
        top: 5%;
        background-color: transparent;
        width: 20px;
    }
    .help {
        position: fixed;
        bottom: 2%;
        right: 5%;
        width: 30px;
        z-index: 9999;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {

    .plan_text {
        display: none;
    }
    .login_left,
    .login_center,
    .login_right {
        width: 100%;
    }
    .text-muted {
        color: #ffffff!important;
    }
    .moblogo {
        display: block;
    }
    .laplogo {
        display: none;
    }
    .small-po {
        padding: 0px !important;
        margin: auto;
    }
    .card {
        left: 0;
    }
    .small-ma {
        margin: 0px !important;
    }
    .plan_text_right {
        display: none;
    }
    .login_page {
        padding: 0% 8%;
    }
    .leftside_icon_img {
        width: 18px;
        margin-right: 4%;
    }
    .plan_text br {
        display: none;
    }
    .plan_text {
        word-spacing: 0px;
    }
    .plan_text {
        font-size: 24px;
        font-weight: 500;
        margin: 4% 4%;
        text-align: center;
        position: relative;
        z-index: 9;
        /*line-height: 56px;*/
    }
    .logo_login {
        width: 200px;
        margin: auto;
    }
    .card-body {
        -webkit-box-flex: none;
        -ms-flex: 1 1 auto;
        flex: none;
        padding: 5% 4%;
        padding-top: 5%;
        box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -webkit-box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -moz-box-shadow: 1px -11px 29px 200px rgba(0, 0, 0, 0.75);
    }
    .plan_text_right br {
        display: none !important;
    }
    .plan_text_right {
        position: relative;
        text-align: center;
        font-size: 16px;
        margin: 2% 0%;
    }
    .card {
        position: fixed;
        width: 100%;
        bottom: 0;
        border-radius: 0 !important;
        background-color: #000;
    }
    .welcome_text {
        font-size: 22px;
        color: #fff;
    }
    .login_btn,
    .microsoft_btn {
        font-size: 13px;
    }
    .account-pages .form-control {
        font-size: 14px;
    }
    .loopscroll {
        height: 100vh;
        background-size: auto !important;
        animation-duration: 40s !important;
    }
    .account-pages {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        height: 100vh;
        margin: 0% 0%;
    }
    .event-paln-style {
        width: 33px;
        height: 33px;
        margin: auto 20%;
    }
    .nav-menu a {
        font-size: 15px;
    }
    .sidebarFixed {
        width: 15%;
    }
}

@media only screen and (min-width: 480px) and (max-width: 599px) {
    .main-content h1 {
        font-size: 32px;        
    }
    .main-content p {
        font-size: 14px;        
        line-height: 27px;        
        margin-bottom: 2%;
    }
    .main-content-title h3 {
        font-size: 20px;        
    }
    .plan_text {
        display: none;
    }
    .login_left,
    .login_center,
    .login_right {
        width: 100%;
    }
    .text-muted {
        color: #ffffff!important;
    }
    .moblogo {
        display: block;
    }
    .laplogo {
        display: none;
    }
    .small-po {
        padding: 0px !important;
    }
    .small-ma {
        margin: 0px !important;
    }
    .plan_text_right {
        display: none;
    }
    .login_page {
        padding: 0% 8%;
    }
    .leftside_icon_img {
        width: 18px;
        margin-right: 4%;
    }
    .plan_text br {
        display: none;
    }
    .plan_text {
        word-spacing: 0px;
    }
    .plan_text {
        font-size: 24px;
        font-weight: 500;
        margin: 2% 5%;
        line-height: 32px;
        text-align: center;
        position: fixed;
        z-index: 0;
        top: 0px;
    }
    .logo_login {
        width: 200px;
        margin: auto;
    }
    .card-body {
        -webkit-box-flex: none;
        -ms-flex: 1 1 auto;
        flex: none;
        padding: 5% 4%;
        padding-top: 5%;
        box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -webkit-box-shadow: 0px -66px 71px 48px rgb(0 0 0 / 95%);
        -moz-box-shadow: 1px -11px 29px 200px rgba(0, 0, 0, 0.75);
    }
    .plan_text_right br {
        display: none !important;
    }
    .plan_text_right {
        position: relative;
        text-align: center;
        font-size: 16px;
        margin: 2% 0%;
    }
    .card {
        position: fixed;
        width: 100%;
        bottom: 0;
        border-radius: 0 !important;
        background-color: #000;
    }
    .welcome_text {
        font-size: 22px;
        color: #fff;
    }
    .login_btn,
    .microsoft_btn {
        font-size: 13px;
    }
    .account-pages .form-control {
        font-size: 14px;
    }
    .loopscroll {
        min-height: 100vh;
        background-size: inherit !important;
        overflow: scroll;
        height: 100%;
        animation-duration: 30s !important;
    }
    .account-pages {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        height: 100vh;
        margin: 0% 0%;
    }
    .event-paln-style {
        width: 30px;
        height: 30px;
        margin: auto 29%;
    }
    .menu ul {        
        margin-left: 15%;      
    }
    .nav-menu a {
        font-size: 14px;
    }
    .sidebarFixed {
        width: 15%;
    }
    .button_container {        
        left: 4.5%;        
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .main-content h1 {
        font-size: 26px;
    }
    .main-content p {
        font-size: 14px;
        line-height: 25px;
    }
    .plan_text {
        display: none;
    }
    .login_left,
    .login_center,
    .login_right {
        width: 120%;
    }
    .text-muted {
        color: #ffffff!important;
        font-size: 12px;
    }
    .moblogo {
        display: block;
    }
    .laplogo {
        display: none;
    }
    .small-po {
        padding: 0px !important;
    }
    .small-ma {
        margin: 0px !important;
    }
    .plan_text_right {
        display: none;
    }
    .login_page {
        padding: 0% 10%;
    }
    .leftside_icon_img {
        width: 18px;
        margin-right: 4%;
    }
    .plan_text br {
        display: none;
    }
    .plan_text {
        word-spacing: 0px;
    }
    .plan_text {
        font-size: 24px;
        font-weight: 500;
        margin: 2% 5%;
        line-height: 32px;
        text-align: center;
        position: fixed;
        z-index: 0;
        top: 0px;
    }
    .logo_login {
        width: 120px;
        margin: auto;
    }
    .emp_text {
        color: #fff !important;
        font-size: 11px;
        font-weight: 400;
    }
    .card-body {
        -webkit-box-flex: none;
        -ms-flex: 1 1 auto;
        flex: none;
        padding: 5% 4%;
        padding-top: 5%;
        box-shadow: 0px -60px 67px 48px rgb(0 0 0 / 95%);
        -webkit-box-shadow: 0px -60px 67px 48px rgb(0 0 0 / 95%);
        -moz-box-shadow: 1px -11px 29px 200px rgba(0, 0, 0, 0.75);
    }
    .plan_text_right br {
        display: none !important;
    }
    .plan_text_right {
        position: relative;
        text-align: center;
        font-size: 16px;
        margin: 2% 0%;
    }
    .card {
        position: fixed;
        width: 100%;
        top: 45%;
        border-radius: 0 !important;
        background-color: #000;
        height: 100vh;
    }
    .microsoft_icon {
        width: 25px;
        height: 25px;
    }
    .mb-3 {
        margin-bottom: 10px !important;
    }
    .mt-4 {
        margin-top: 10px !important;
    }
    .welcome_text {
        font-size: 24px;
        color: #fff;
        font-weight: 400;
    }
    .login_btn,
    .microsoft_btn {
        font-size: 12px;
    }
    .account-pages .form-control {
        font-size: 12px;
    }
    .loopscroll {
        min-height: 100vh;
        background-size: inherit !important;
        overflow: scroll;
        height: 100%;
        animation-duration: 10s !important;
    }
    .account-pages {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        height: 100vh;
        margin: 0% 0%;
    }
    .event-paln-style {
        width: 24px;
        height: 24px;
        margin: auto 27%;
    }
    .nav-menu a {
        font-size: 13px;
    }
    .sidebarFixed {
        width: 20%;
    }
    .menu ul {
        margin-left: 20%;
    }
    .menu h5 {
        margin-left: 20%;
    }
    .main-content-title h3 {
        font-size: 18px;
    }
    .button_container {       
        left: 4.5%;       
    }
    .footer-logo {        
        left: 20%;        
    }
}

@media only screen and (max-height: 400px) {
    .plan_text {
        display: none;
    }
    
}

@media only screen and (min-width: 200px) and (max-width: 319px) {
    .main-content h1 {
        font-size: 26px;
    }
    .main-content p {
        font-size: 14px;
        line-height: 25px;
    }
    .plan_text {
        display: none;
    }
    .login_left,
    .login_center,
    .login_right {
        width: 100%;
    }
    .text-muted {
        color: #ffffff!important;
        font-size: 12px;
    }
    .moblogo {
        display: block;
    }
    .laplogo {
        display: none;
    }
    .small-po {
        padding: 0px !important;
    }
    .small-ma {
        margin: 0px !important;
    }
    .plan_text_right {
        display: none;
    }
    .login_page {
        padding: 0% 10%;
    }
    .leftside_icon_img {
        width: 18px;
        margin-right: 4%;
    }
    .plan_text br {
        display: none;
    }
    .plan_text {
        word-spacing: 0px;
    }
    .plan_text {
        font-size: 24px;
        font-weight: 500;
        margin: 2% 5%;
        line-height: 32px;
        text-align: center;
        position: fixed;
        z-index: 0;
        top: 0px;
    }
    .logo_login {
        width: 120px;
        margin: auto;
    }
    .emp_text {
        color: #fff !important;
        font-size: 11px;
        font-weight: 400;
    }
    .card-body {
        -webkit-box-flex: none;
        -ms-flex: 1 1 auto;
        flex: none;
        padding: 5% 4%;
        padding-top: 5%;
        box-shadow: 0px -60px 67px 48px rgb(0 0 0 / 95%);
        -webkit-box-shadow: 0px -60px 67px 48px rgb(0 0 0 / 95%);
        -moz-box-shadow: 1px -11px 29px 200px rgba(0, 0, 0, 0.75);
    }
    .plan_text_right br {
        display: none !important;
    }
    .plan_text_right {
        position: relative;
        text-align: center;
        font-size: 16px;
        margin: 2% 0%;
    }
    .card {
        position: fixed;
        width: 100%;
        top: 45%;
        border-radius: 0 !important;
        background-color: #000;
        height: 100vh;
    }
    .microsoft_icon {
        width: 25px;
        height: 25px;
    }
    .mb-3 {
        margin-bottom: 10px !important;
    }
    .mt-4 {
        margin-top: 10px !important;
    }
    .welcome_text {
        font-size: 24px;
        color: #fff;
        font-weight: 400;
    }
    .login_btn,
    .microsoft_btn {
        font-size: 12px;
    }
    .account-pages .form-control {
        font-size: 12px;
    }
    .loopscroll {
        min-height: 100vh;
        background-size: inherit !important;
        overflow: scroll;
        height: 100%;
        animation-duration: 10s !important;
    }
    .account-pages {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        height: 100vh;
        margin: 0% 0%;
    }
    .event-paln-style {
        width: 24px;
        height: 24px;
        margin: auto 27%;
    }
    .nav-menu a {
        font-size: 13px;
    }
    .sidebarFixed {
        width: 20%;
    }
    .menu ul {
        margin-left: 20%;
    }
    .menu h5 {
        margin-left: 20%;
    }
    .main-content-title h3 {
        font-size: 18px;
    }
    .button_container {       
        left: 4.5%;       
    }
    .footer-logo {        
        left: 20%;        
    }
}