@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&display=swap');
/* Higher than 1400 (desktop devices)
====================================================================== */
@media only screen and (min-width: 1400px) {
.container{
    width: 1400px;
}




}
/* Higher than 1200 (desktop devices)
====================================================================== */
@media only screen and (min-width: 1200px) {
      .container-fluid.navbar{
        width: 375px;
        margin: auto;
       }
       .container{
        width: 375px;
       }
       body{
        font-family: 'Roboto', sans-serif;
       }

        /* =nav bar= */
    

       



/* ----------------nav---------------- */

        /* ========openpage========= */

        .pending-text.memb h5 {
            font-weight: bolder;
        }

        .pending-text.memb h5 {
            font-weight: bolder;
        }

        /* ==openpage1== */
        .openpage-1 h4 {
            color: #052E50;
        }
        .openpage-1 h4 {
            margin-left: 18px;
            margin-top: 15px;
            margin-bottom: 5px;
        }
        .openpage-1 h4:after {
            display: block;
            position: absolute;
            width: 10%;
            height: 2px;
            content: "";
            background-color: #962A15;
        }


        /* =====banner===== */
        section.banner{
            background-image: url(../images/kspcbg.png);
            min-height: 635px;
            background-repeat: no-repeat;
            background-size: cover;
            width: 375px;
            margin: auto;
        }


        /* =========welcome page========= */
        
        .panel-login .checkbox input[type=checkbox]{
          margin-left: 0px;
        }
        
        .panel-login>.panel-heading .login {
          padding: 20px 30px;
          border-bottom-left-radius: 5px;
        }
        
        .panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
          height: 45px;
          border: 0;
          font-size: 16px;
          -webkit-transition: all 0.1s linear;
          -moz-transition: all 0.1s linear;
          transition: all 0.1s linear;
          -webkit-box-shadow: none;
          box-shadow: none;
          border-bottom: 1px solid #7e7272;
          border-radius: 0px;
          padding: 6px 0px;
        }
        
        .login {
            color: white;
            font-size: 16px;
            text-align: center;
        }
        .tabs_login {
            background-color: #962A15;
            text-align: center;
            border-radius: 9px;
        }
        
        .login-button {
            background-color: #962A15;
            border: none;
            color: white;
            width: 100%;
            text-align: center;
            padding: 14px;
            border-radius: 6px;
        }
        
        span.error {
            color: red;
        }
        .panel-body{
            padding: 0;
        }
        .panel-heading{
            padding: 0;
        }
        .welcomeback h4:after {
            display: block;
            position: absolute;
            width:3%;
            height: 2px;
            content: "";
            background-color: #962A15;
        }
        .panel{
            background-color: transparent !important;
            box-shadow: none;
        }
        .form-control{
            background-color: transparent !important;
           
        }
        .welcomeback h4{
            margin-bottom: 50px;
        }

        section.welcomeback h4 {
            line-height: 36px;
        }
        .welcome-btn a.btn.btn-primary {
            background-color: #962A15;
            padding: 13px 100px;
            border-radius: 5px;
            margin-left: -30px !important;
        }


        /* =======otp page====== */

        input#login_otp {
            width: 5%;
            float:left;
            display: inline-block;
            border-bottom: 3px solid;
            margin-left: 10%;
        }
        
        section.otp_verification {
            text-align: center;
            
        }
     
        .resed_otp>a{
            color: black;
            text-decoration: none;
        }
        .resed_otp {
            margin-top: 100px;
        }
        .verify_otp{
            margin-top: 20px;
        }
        .otp-geader {
            margin-top: 20% !important;
        }


        
        /*  ======renewal info========== */

        img.userimg {
            width: 100%;
        }
        .userprofile {
            background: #B9CCDD;
            border-radius: 50%;
        }
        section.renewal_info {
            padding: 10px 0;
            background: #F0F0F0;
            width: 375px;
            margin: auto;
        }
        .col-xs-9.userinfo.prof p {
            margin-bottom: 5px;
            color: #052E50!important;
            font-weight: 600;
        }
        .col-xs-9.userinfo.prof{
            padding-left: 0;
        }
        .pending-text {
            float: left;
        }
        .pending_button {
            float: right;
            margin: 10px 0;
        }

        .pending-text h4,p{
            color: #7E0F00;
        }
        .pending-text>h4 {
            margin-bottom: 5px;
            font-weight: 600;
        }
        .pending-text>p {
            font-size: 11px ;
            margin: 0;;
        }
        .myac p {
            color: #052E50!important;
            margin: 0;

        }
        .myac p {
            color: #052E50;
            font-weight: 500;
            font-size: 15px;
        }
        .member-service glyphicon{
            color: #052E50;
            font-size: 20px;
        }
        i.bi.bi-receipt{
            color: #052E50;
            font-size: 20px;
        }
        .myac {
            background-color: #F1F9FF;
            /* padding: 27px; */
            padding: 25px 27px 25px 20px;
            color: #052E50;
            font-size: 20px;
        }

        .myac1 img.myac-img {
            width: 30px;
            margin-bottom: 10px;
        }
        .myac1 p {
            font-weight: 600;
        }
        .myac1 .fa {
            font-size: 30px;
            margin-bottom: 10px;
        }
        .myac1 .glyphicon{
            font-size: 30px;
            margin-bottom: 10px;
            color: #052E50;
        }
        section.member.service h4{
            font-size: 16px;
            color: #052E50;
        }
        .pending-text>h5 {
            font-size: 18px;
            margin-bottom: 0;
        }
        .pending-text.memb h5,p{
            color: #052E50;
        }
        .member-info {
            clear: both;
        }

        img {
            vertical-align: none !important;
        }

        .member-info a {
            text-decoration: none !important;
        }
        /* =======register===== */

        .progleback>a>span.glyphicon.glyphicon-chevron-left {
            float: left !important;
            margin-right: 10px;
            margin-top: -1px;
            color: #A71515;
        }
        .progleback>h4{
            font-size: 20px;
            color: #A71515;
            margin:0;
        
        }
        .sec_header>h2 {
            font-weight: 400 !important;
            float: left;
            margin: 10px 0;
            font-size: 25px;
        }
        .sec_header>a>h5 {
            float: right;
            margin: 20px 0 0;
            border-bottom: 1px solid #A71515;
            color: #A71515;
        
        }
        .sec_header>h2::after{
            display: block;
            position: absolute;
            width: 12%;
            height: 2px;
            content: "";
            background-color: #962A15;
        }
        .table{
            margin-bottom: 5px;
        }
       
        th {
            padding: 5px !important;
            background: white;
            font-size: 14px;
            font-weight: 500;
            color: #052E50;
            vertical-align: text-top;
            padding-bottom: 0 !important;
        }
        section.register {
            background: #EFEFEF;
            padding: 10px 0;
            width: 375px;
            margin: auto;
        }
        .content_main {
            clear: both;
            padding: 10px 0;
        }
        .content_main p {
            margin-bottom: 5px;
            font-weight: bold;
        }
        section.welfare_info {
            background: #FAF8E5;
            padding: 10px 0;
            margin-bottom: 10px;
            width: 375px;
            margin: auto;
        }
        th.profile {
            color: #877a7a;
        }
        


        /* =====about KSPC page==== */

        .page_header>h2{
            font-weight: 400;
        }
        .info_block p {

            font-size: 16px;
            color: black;
                padding: 11px 26px 0px 0px;
                width: 75%;
        }


        /* ======council member block======= */

        .council_memb_img {
            margin-bottom: 20px;
        }
        .council_memb_img img{
            width: 100%;
        }
        .col-xs-9.council_memb_inf {
            padding-left: 0;
        }
        .council_memb_inf h4 {
            margin: 0;
        }
        .council_memb_inf p {
            font-size: 13px;
            margin: 4px 0;
            font-weight: 500;
            color: black;
        }
        .concil_memb {
            border-bottom: 1px solid;
            min-height: 102px;
            clear: both;
            margin-top: 60px;

        
        }
        .page_header.cou>h2 {
            margin: 10px 0 20px;
        }
        .col-xs-3.council_memb_img {
            padding-left: 0;
        }
        


        /* =======profile page====== */
        .profiletext h4 {
            color: rgb(28, 11, 11);
            font-size: 16px;
        }

        .profilebg h1 {
            margin: 0;
            font-family: 'Roboto Slab', serif;
            text-transform: uppercase;
            font-size: 25px;
            color: white;
            padding: 30px 0 30px 0px;
            font-weight: 400;
            margin-bottom: 10px;
        }
        
        .profiletext p {
            font-size: 14px;
            color: #3e3e3e;
            text-align: justify;
        }
        .profiletext ol {
            font-size: 14px;
            color: #3e3e3e;
            padding-left: 25px;
            text-align: justify;
        }

        }.profilebg {
            background-color: #428373;
            width: 375px;
            margin: auto;
        }
        .pharmacistoth {
            margin-top: 10px;
        }

        .profiletext h4 {
            color: rgb(30, 26, 26);
            font-size: 16px;
        }
        
        /* =========PHARMACIST' OATH===== */

        .pharmacistoth ul {
            font-size: 16px;
            padding-left: 19px;
            color: #3e3e3e;
        }


          /* ================================== */



/* /* /* Higher than 960 (desktop devices) 
====================================================================== */
/* ======================tablet landscape======================== */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* nav bar= */
    ul.nav.navbar-nav>li {
        padding: 2px;
    }



}
/* Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
        /* =nav bar= */
        .navbar-header {
            width: 100%;
        }
        .navbar-default .navbar-toggle{
            border: none;
        }
        span.icon-bar {
            background-color: #18b61e !important;
        }
        ul.dropdown-menu {
            width: 100%;
            text-align: center;
        }
        .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
            background: none;
        }
        .container.nav {
            padding: 0px;
        }
        ul.nav.navbar-nav li{
            padding: 0px;
        }
        .navbar-collapse.collapse{
            display: none !important;
        }
        button.navbar-toggle {
            display: block;
            padding-left: 30px;
        }
        .navbar-collapse.in {
            display: block !important;
    
        }
        div#bs-example-navbar-collapse-1 {
            position: absolute;
            width: 100%;
            background: #3a89f5;
            margin-top: 50px;
        }
      
        ul.nav.navbar-nav.navbar-center>li{
            border: none;
            width: 100%;
        }
        ul.nav.navbar-nav li{
            width: 100%;
        }
        ul.nav.navbar-nav{
            text-align: left;
        }
        
        
}

/* All Mobile Sizes (devices and browser)
====================================================================== */
@media only screen and (max-width: 767px) {

body{
    font-family: 'Roboto', sans-serif;
}
/* =nav bar= */ 

section {
    width: 100% !important;
}

/* ======== */
header.header {
    position: sticky;
    top: 0;
    background: #052E50;
    height: 50px;
}
 ul.nav.navbar-nav {
    margin: 0;
}
nav.navbar.navbar-default {
    padding: 10px 0;
}
section.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}
.left_premier {
    margin-top: 20px;
}
.navbar{
    margin-bottom: 0;
}
.navbar-default .navbar-toggle{
    border: none;
}
span.icon-bar{
   background-color: white !important;
}

ul.nav.navbar-nav{
    text-align: left;
}
.dropdown-menu>li>a {
    padding: 15px 15px !important;
}
ul.dropdown-menu {
    width: 100%;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
    background-color: transparent !important;
}
.navbar{
    min-height: 75px;
}
.navbar-brand>img{
    margin-right: 5px;
}
.navbar-brand{
    padding: 6px 15px;
}
.navbar-header {
    color: white;
}
a.navbar-brand {
    display: flex;
    
    color: white !important;
    font-weight: 600;
}
a.navbar-brand>p{
    font-size: 14px !important;
    color: white;
}
/* ==============header================= */
.main_logo img {
    float: left;
    width: 13%;
    margin-left: 11px;
    padding-right: 4px;
    margin-top: -4px;
    margin-right: 6px;
  }
header.header {
    width: 100%;
    margin: auto;
}
.main_logo h4.main-headr {
    color: white;
    font-size: 14px;
    font-weight: 400;
    margin-top:2px !important ;
}
.main_logo {
    margin-top: -5px;
}
header.header {
    position: sticky;
    top: 0;
    background: #052E50;
    height: 44px;
}


/* =====open page======= */



/* =====banner===== */

section.banner{
    background-image: url(../images/kspcbg.png);
    min-height: 635px;
    background-repeat: no-repeat;
    background-size: cover;

}


/* =========welcome page========= */


.panel-login .checkbox input[type=checkbox]{
  margin-left: 0px;
}

.panel-login>.panel-heading .login {
  padding: 20px 30px;
  border-bottom-left-radius: 5px;
}

.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
  height: 45px;
  border: 0;
  font-size: 16px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-bottom: 1px solid #7e7272;
  border-radius: 0px;
  padding: 6px 0px;
}

.login {
    color: white;
    font-size: 18px;
    text-align: center;
}
.tabs_login {
    background-color: #962A15;
    text-align: center;
    border-radius: 9px;
}

.login-button {
    background-color: #962A15;
    border: none;
    color: white;
    width: 100%;
    text-align: center;
    padding: 14px;
    border-radius: 6px;
}

span.error {
    color: red;
}
.panel-body{
    padding: 0;
}
.panel-heading{
    padding: 0;
}
.welcomeback h4:after {
    display: block;
    position: absolute;
    width: 12%;
    height: 2px;
    content: "";
    border-bottom: #A71515;
    background-color: #962A15;
}
.panel{
    background-color: transparent !important;
    box-shadow: none;
}
.form-control{
    background-color: transparent !important;
   
}
.welcomeback h2{
    margin-bottom: 40px;
}
section.welcomeback {
    padding: 38% 0;
}
section.welcomeback h4 {
    line-height: 36px;
}


/* ==openpage1== */

.openpage-1 h4 {
    color: #052E50;
}
.openpage-1 h4 {
    margin-left: 18px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.openpage-1 h4:after {
    display: block;
    position: absolute;
    width: 22%;
    height: 2px;
    content: "";
    background-color: #962A15;
}


/* =======otp page====== */

input#login_otp {
    width: 5%;
    float: left;
    display: inline-block;
    border-bottom: 3px solid;
    margin-left: 10%;
}

section.otp_verification {
    text-align: center;
    
}

input.btn.btn-inf {
    background-color: #962A15;
    border: none;
    outline: none;
    color: white;
    width: 94%;
    border-radius: 50px;
    position: absolute;
    bottom: 0;
    left: 3%;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 0;
    margin-left: 8px;
}
.resed_otp {
    bottom: 0;
    margin-bottom: 10%;
    left: 40%;
}
.resed_otp>a{
    color: black;
}

/*  ======renewal info========== */

img.userimg {
    width: 100%;
}
.userprofile {
    background: #B9CCDD;
    border-radius: 50%;
}
section.renewal_info {
    padding: 10px 0;
    background: #F0F0F0;
}
.col-xs-9.userinfo.prof p {
    margin-bottom: 5px;
    color: #052E50!important;
    font-weight: 600;
}
.col-xs-9.userinfo.prof{
    padding-left: 0;
}
.pending-text {
    float: left;
}
.pending_button {
    float: right;
    margin: 10px 0;
}

.pending-text h4,p{
    color: #7E0F00;
}
.pending-text>h4 {
    margin-bottom: 5px;
    font-weight: 600;
}
.pending-text>p {
    font-size: 11px ;
    margin: 0;;
}
.myac {
    background-color: #F1F9FF;
    padding: 27px;
    padding: 25px 27px 25px 20px;
    color: #052E50;
    font-size: 20px;
}
.myac p {
    color: #052E50!important;
    margin: 0;
}
.myac p {
    color: #052E50;
    font-weight: 500;
    font-size: 15px;
}
.member-service glyphicon{
    color: #052E50;
    font-size: 20px;
}
i.bi.bi-receipt{
    color: #052E50;
    font-size: 20px;
}

.myac1 img.myac-img {
    width: 30px;
    margin-bottom: 10px;
}
.myac1 p {
    font-weight: 600;
}
.myac1 .fa {
    font-size: 30px;
    margin-bottom: 10px;
    color: #052e50;
}
.myac1 .glyphicon{
    font-size: 30px;
    margin-bottom: 10px;
    color: #052E50;
}
section.member.service h4{
    font-size: 16px;
    color: #052E50;
}
.pending-text>h5 {
    font-size: 18px;
    margin-bottom: 0;
}
.pending-text.memb h5,p{
    color: #052E50;
}
.member-info {
    clear: both;
}



/* =======register===== */

.progleback>a>span.glyphicon.glyphicon-chevron-left {
    float: left !important;
    margin-right: 10px;
    margin-top: -1px;
    color: #A71515;
}
.progleback>h4{
    font-size: 20px;
    color: #A71515;
    margin:0;

}
.sec_header>h2 {
    font-weight: 400 !important;
    float: left;
    margin: 10px 0;
    font-size: 25px;
}
.sec_header>a>h5 {
    float: right;
    margin: 20px 0 0;
    border-bottom: 1px solid #A71515;
    color: #A71515;

}
.sec_header>h2::after{
    display: block;
    position: absolute;
    width: 12%;
    height: 2px;
    content: "";
    background-color: #962A15;
}
.table{
    margin-bottom: 5px;
}

th {
    padding: 5px !important;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #052E50;
    padding-bottom: 0 !important;
}
section.register {
    /* background: #EFEFEF; */
    padding: 10px 0;
}
.content_main {
    clear: both;
    padding: 10px 0;
}
.content_main p {
    margin-bottom: 5px;
    font-weight: bold;
}

th.profile {
    color: #877a7a;
}



/* =====about KSPC page==== */





.page_header>h4{
    font-weight: 400;
}
.info_block p {
   
    font-size: 16px;
    color: black;
        padding: 11px 26px 0px 0px;
        width: 75%;
}




/* ======council member block======= */

.col-xs-9.council_memb_inf {
    padding-left: 0;
}
.council_memb_inf h4 {
    margin: 0;
}
.council_memb_inf p {
    font-size: 13px;
    margin: 4px 0;
    font-weight: 500;
    color: black;
}

.page_header.cou>h2 {
    margin: 10px 0 20px;
}



/* =======profile page====== */

.profilebg h1 {
    margin: 0;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    font-size: 25px;
    color: white;
    padding: 30px 0 30px 0px;
    font-weight: 400;
    margin-bottom: 10px;
}

.profiletext p {
    font-size: 14px;
    color: #3e3e3e;
    text-align: justify;
}
.profiletext ol {
    font-size: 14px;
    color: #3e3e3e;
    padding-left: 25px;
    text-align: justify;
}

}.profilebg {
    background-color: #428373;
}
.pharmacistoth {
    margin-top: 10px;
}


/* =========PHARMACIST' OATH===== */
.pharmacistoth ul {
    font-size: 14px;
    padding-left: 19px;
    color: #3e3e3e;
}
.profiletext ul {
    text-align: justify;
    font-size: 14px;
}
.pagecou-btn .btn.active, .btn:active {
    margin-left: 60px !important;
    margin-top: 12px !important;
    background-color: #052E50 !important;
    color: white !important;
  }

/* ================================== */
/* ---footer--- */


/* ================== */


/* Mobile Landscape Size to Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Iphone 5 styles
=================================================================== */
@media only screen and (max-width: 375px){



}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
=================================================================== */
@media only screen and (min-width: 414px) and (max-width: 736px) {


}