:root {
    --purple:                       #734eb0;
    --secondary-color:              #ddd4ec;
    --primary-color:                #b6abca;
    --darkpurple:                   #3b285b;
    --lightblue:                    #5c6c9e;
    --darkblue:                     #313950;
}


body {
    font-family: Arial, sans-serif,  'Segoe UI', Tahoma, Verdana ;
    font-size: 15px;
    margin: 0px;
    padding: 0px;
    background-color: var(--primary-color);
    /* background-color: #f8faf8; */
    /* background-color:#ffffff; */
    /* position: static; eef2ec */
    display: block;
}


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


.span{
    color: var(--purple);
}


title-page{
    text-align: center;
    align-content: center;
    width: 80%;
    font-size: 15px;
    /* color: #6948ed; */
    color: var(--purple);
    padding-left: 50px;
}


.navbar
{
    /* background-color: #f8faf8; */
    background-color: var(--primary-color);
    
    /* height: 80px; */
    width: 100%;
    position: sticky;
    overflow: visible;
    /* height:300px; f8faf8 */ 
    /* float: left; */
}


.navbarmenu
{
    list-style-type: none;
    padding: 0px;
    margin-left: 60px;
    margin-right: 0px;
    /* float: left; */
    width: 95%;
    /* overflow: hidden; */
}


.navbarmenu-item
{
    margin: 0px;
    padding-top: 8px;
    padding-left: 55px;
    padding-right: 55px;
    /* float: left; */
    /* color: black; */
    color: white;
    text-decoration: none;
    /* overflow: hidden; */
}


.jbapp-cd-view{
    margin: 0px;
    padding: 0px;
}


.navbarmenu-cd-view{
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    float: left;
    width: 100%;
    text-decoration: none;
    list-style-type: none;
}


.navbarmenu-item-cd-view
{
    width: 50%;
    margin: 0px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 5px;
    padding-bottom: 5px;
    /* color: black; */
    color: white;
    text-decoration: none;
    /* text-align: center;
    align-content: center; */
    list-style-type: none;
    float: left;
}


.navbarmenu-item-cd-view-title
{
    width: 80%;
    margin: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    /* color: black; */
    color: white;
    text-decoration: none;
    text-align: center;
    align-content: center;
    list-style-type: none;
    float: left;
    font-size: 15px;
    /* border: 2px solid black; */
}


.cd-view-1{
    margin: 0px;
    padding: 7px;
    /* color: black; */
    color: white;
    text-decoration: none;
    list-style-type: none;
    /* background-color: #e7efe7; */
    background-color: var(--lightblue);
    border-radius: 5px;
}


.cd-view-1:hover{
    background-color: var(--darkblue);
}


.cd-view-li{
    margin: 5px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
    list-style-type: none;
}


.navbarmenu-item-logo
{
    margin: 0px;
    padding-top: 1px;
    padding-left: 10px;
    padding-right: 10px;
}


.navbarmenu-item-logo:hover{
    cursor: default;
}


.navbarmenu-item a{
    /* color: black; */
    color: white;
    text-decoration: none;
    display: block;
    /* display: inline-block; */
    /* background-color: #e7efe7; */
    background-color: var(--lightblue);
    border-radius: 5px;
    padding: 7px;
    /* float: left; */


    /* padding-top: 15px;
    padding-left: 60px;
    padding-right: 60px; */
}


.navbarmenu-item a{
    transition: background-color 0.1s;
}


.navbarmenu-item a:hover
{
    /* text-decoration: underline; */
    /* background-color: #cccfca; */
    background-color: var(--darkblue);
    /* background-color: #e7efe7;
    border-radius: 2px;
    padding: 5px; */
}


/* .navbarmenu-item a:hover{
    text-decoration: none;
    background-color: #e7efe7;
    border-radius: 5px;
    padding: 5px;
} */


/* navbarmenu-item #navbar-logout{
    transition: background-color 0.1s;
}


.navbarmenu-item #navbar-logout:hover{
    text-decoration: none;
    background-color: #e7efe7;
    border-radius: 5px;
    padding: 5px;
} */


.sidebar-container{
    /* height: 600px; */
    /* height: 60vh; */
    /* height: auto; */
    /* display: flex; */
    width: 100%;
    /* width: auto; */
    margin-top: 5px;
    margin-bottom: 0px;
    /* overflow: auto; */
}


.sidebar-container-1{
    height: 680px;
    /* height: 60vh; */
    /* height: auto; */
    /* display: flex; */
    width: 100%;
    /* width: auto; */
    margin-top: 5px;
    margin-bottom: 0px;
}

.sidebar-container-2{
    /* height: 600px; */
    /* height: 60vh; */
    /* height: auto; */
    /* display: flex; */
    width: 100%;
    /* width: auto; */
    margin-top: 5px;
    margin-bottom: 0px;
    overflow: auto;
}


/* .sidebar-container::after {
    content: "";
    display: table;
    clear: both;
  } */


.float-left {
    float: left;
}


.float-right {
    float: right;
}


.sidebar1{
    /* background-color: #f8faf8; */
    /* background-color:#ffffff; */
    background-color: var(--secondary-color);
    height: 600px;
    /* width: 20%; */
    padding-top: 0px;
    margin-right: 4px;
    margin-left: 5px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: sticky; */
    overflow: hidden;
}


.sidebar2{
    /* background-color: #f8faf8; */
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    /* max-height: 600px;
    min-height: 600px; */
    /* width: 79%; */
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
}


.sidebar2-cd{
    /* background-color: #f8faf8; */
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    max-height: 680px;
    min-height: 680px;
    /* width: 79%; */
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
}


.sidebar2-cd-view{
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    max-height: 600px;
    min-height: 600px;
    width: 100%;
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
}

.sidebar2-cd-view1{
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    max-height: 700px;
    min-height: 700px;
    width: 100%;
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
}


.sidebar2-trial{
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    max-height: 600px;
    min-height: 600px;
    width: 70%;
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
    /* align-self: center; */
    /* display: flex;
    justify-content: center; */
    margin: auto;
}


.sidebar2-trial-1{
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    max-height: 600px;
    min-height: 600px;
    width: 70%;
    padding-top: 0px;
    /* margin: 2px; */
    border-radius: 7px;
    /* border: 1px solid black;  */
    /* position: fixed; */
    overflow-y: auto;
    /* align-self: center; */
    /* display: flex;
    justify-content: center; */
    margin: auto;
    padding-bottom: 30px;
}


.sidebar1-item
{
    margin: 0px;

    /* padding: 0px; */

    /* margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px; */
    /* margin-right: 10px; */

    padding-top: 30px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 30px;

    /* height: 80px; */

    /* padding-top: 20px;  
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px; */

    /* padding: auto; */
    float: left;
    /* color: black; */
    color: white;
    text-decoration: none;
    list-style-type: none;
    align-content: center;

    /* background-color: #a39d9d; */
}


.sidebar1-item a {
    /* color: #6948ed; */
    color: var(--purple);
    text-decoration: none;
    /* background-color: #e6e9e4; */
    background-color: var(--secondary-color);
    padding: 7px;
    border-radius: 7px;
}


.sidebar1-item a {
    transition: background-color 0.1s;
  }


.sidebar1-item a:hover
{
    /* text-decoration: underline; */
    /* background-color: #cccfca; */
    background-color: var(--primary-color);
}


/* .sidebar1-item a:visited
{
    /* text-decoration: underline; */
    /* background-color: #c7e4b2;
} */ */


div::after{
    content: "";
    /* display: table; */
    clear: both;
}


/* section::after {
    content: "";
    display: table;
    clear: both;
} */
  

.footer{
    height: 40px;
    /* background-color: #e7efe7;   */
    background-color: var(--primary-color);  
    /* background-color: #1c701c;  */
    margin: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* padding-left: 50px; */
    /* font-size: 12px; */
    align-content: center; 
    text-align: center;
    width: 99%;
    float: none;
    font-size: 14px;
    /* position: fixed; */
    /* position: absolute;  */
    bottom: 0;
}


.sidebar2-para{
    padding-left: 0px;
}


.sidebar2-cr-exp-item{
    margin: 0px;
    padding-top: 30px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 30px;
    list-style-type: none;
    float: left;
}


/* .sidebar2-cr-exp-item a {
    color: #6948ed;
    text-decoration: none;
}


.sidebar2-cr-exp-item a:hover
{
    text-decoration: underline;
} */


textarea{
    resize: none;
}


.faq-element{

    background-color: white;
    border-radius: 5px;
    /* padding: 2px; */
    width: 90%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    border-color: var(--primary-color);

}

.faq-question{

    background-color: var(--secondary-color);
    color: var(--purple);
    padding: 5px;
    width: 100%;
    border-color: var(--primary-color);
    /* border-radius: 5px; */
}

.faq-answer{

    background-color: whitesmoke;
    color: var(--darkpurple);
    padding: 5px;
    width: 100%;
    border-color: var(--primary-color);
    /* border-radius: 5px; */
}


.pageheader{

    width: auto;
    margin: 20px;
    color: var(--purple);
    /* background-color: white; */
    border-radius: 5px;
    text-align: left;
    padding: 5px;
    /* padding-left: 20px; */

}

.pageheader-center{

    width: auto;
    margin: 20px;
    color: var(--purple);
    background-color: white;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    padding-left: 20px;

}


.form-container{
    overflow: auto;
    /* margin: 2px; */
}


.form-container-1{
    overflow: auto;
    /* margin: 2px; */
    /* background-color: #ffffff; */
    background-color: var(--secondary-color);
    border-radius: 3px;
    /* border: 1px solid #c2c5c1;
    box-shadow: 1px 2px #c2c5c1; */
    border: 1px solid var(--darkblue);
    box-shadow: 1px 2px var(--darkblue);
    margin: 20px;
}


.form-element{
    margin: 20px;
    height: 35px;
    padding: 20px;
    /* margin-bottom: 20px; */
    /* background-color: black; */
    /* border: 1px solid black; */
}


.form-element-1{
    /* margin: 20px; */
    height: 35px;
    /* padding: 20px; */
    /* margin-bottom: 20px; */
    /* background-color: black; */
    /* border: 1px solid black; */
}
 

.form-label {
    /* width: 20%; */
    /* float: left; */
    font-size: 15px;
    padding: 5px;
    /* border: 1px solid black; */
}


.form-label-1 {
    /* width: 20%; */
    /* float: left; */
    font-size: 15px;
    padding: 5px;
    /* border: 1px solid black; */
}
 

.form-control-container {
    /* width: 80%; */
    /* float: left; */
    width: 100%;
    /* border: 1px solid black; */
}


.form-control-container-1 {
    /* width: 25%; */
    /* float: left; */
    padding-left: 0px;
    padding-right: 5px;
    /* border: 1px solid black; */
}


.form-control-container-2 {
    /* width: 55%; */
    /* float: left; */
    width: 100%;
    /* border: 1px solid black; */
}


.form-control {
    width: 100%;
    padding: 8px;
    border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--primary-color);
    /* transition: box-shadow 0.3s; */
}


.form-control-1{
    width: 100%;
    padding: 8px;
    /* background-color: #e7efe7; */
    background-color: var(--primary-color);
    /* border-radius: 3px;
    border: 1px solid #c2c5c1; */
    /* transition: box-shadow 0.3s; */
}


.form-label-or {
        width: 100%;
        float: left;
        font-size: 15px;
        text-align: center;
        /* color: #6948ed; */
        color: var(--purple);
        padding: 10px;
        /* border: 1px solid black; */
}


.form-label-or-1 {
    width: 100%;
    float: left;
    font-size: 15px;
    text-align: center;
    /* color: #6948ed; */
    color: var(--purple);
    padding: 10px;
    /* border: 1px solid black; */
    margin: 20px;
}


.btn {
    width: auto;
    /* background-color: #6948ed; */
    background-color: var(--purple);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px 1px #bdbbbb;
    transition: background-color 0.3s, box-shadow 0.3s; */
    /* border: 1px solid #ebe8e8; */
    margin: 2px 30px;
    /* margin: 2px 6px; */
    text-align: center;
    align-items: center;
}


.btn-downloadall {
    width: auto;
    /* background-color: #6948ed; */
    background-color: var(--purple);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px 1px #bdbbbb;
    transition: background-color 0.3s, box-shadow 0.3s; */
    /* border: 1px solid #ebe8e8; */
    margin: 2px 30px;
    /* margin: 2px 6px; */
    text-align: center;
    align-items: center;
    text-decoration: none;
}


.btn-2 {
    width: auto;
    /* background-color: #6948ed; */
    background-color: var(--purple);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px 1px #bdbbbb;
    transition: background-color 0.3s, box-shadow 0.3s; */
    /* border: 1px solid #ebe8e8; */
    margin: 2px 35vw;
    /* margin: 2px 6px; */
    text-align: center;
    align-items: center;
    text-decoration: none;
}

.btn-3 {
    width: auto;
    /* background-color: #6948ed; */
    background-color: var(--purple);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    /* box-shadow: 0px 0px 2px 1px #bdbbbb;
    transition: background-color 0.3s, box-shadow 0.3s; */
    /* border: 1px solid #ebe8e8; */
    margin: 10px;
    /* margin: 2px 6px; */
    text-align: center;
    align-items: center;
    text-decoration: none;
    float: left;
}


.btn-4 {
    width: auto;
    /* background-color: #6948ed; */
    background-color: var(--purple);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 15px;
    border-radius: 6px;
    /* cursor: pointer; */
    /* box-shadow: 0px 0px 2px 1px #bdbbbb;
    transition: background-color 0.3s, box-shadow 0.3s; */
    /* border: 1px solid #ebe8e8; */
    margin: 10px;
    /* margin: 2px 6px; */
    text-align: center;
    align-items: center;
    text-decoration: none;
    float: left;
}


.btn-3:hover {
    /* background-color: #8369e8; */
    background-color: var(--darkpurple);
}


.btn-4:hover {
    /* background-color: #8369e8; */
    background-color: var(--darkpurple);
}


.btnbox {
   margin-left: 30px;
   margin-right: 30px;
   display: flex; 
   justify-content: space-between; 
}


  /* .form-control:focus {
    box-shadow: 0px 0px 3px 2px #2b77be;
    outline: none;
  } */


  /* table styles */
.table{
    width: 100%;
    cursor: pointer;
    /* box-shadow: 1px 1px 2px 2px #d4d0d0; */
    margin-top: 10px;
    margin-bottom: 30px;
    border-collapse: collapse;
    min-width: 1000px;
    caption-side: top;
}


.table-container{
    width: 95%;
    margin: auto;
    /* margin: 20px; */
    overflow: auto;
    margin-bottom: 20px;
    max-height: 700px;
}


.table-container-1{
    width: 45%;
    margin-left: 30px;
    margin-right: 30px;
    /* margin: 20px; */
    overflow: auto;
    margin-bottom: 10px;
    max-height: 300px;
    /* float: left; */
    display: flex;
    justify-content: space-between;
}


.table th{
    /* border: 1px solid #b0b5b0; */
    border: 1px solid var(--darkblue);
    padding: 12px 10px;
    text-align: center;
    /* background-color: #e6e9e4;
    color: #6948ed; */
    background-color: var(--primary-color);
    color: var(--purple);
}


.table td{
    /* border-top: 1px solid #a39d9d;
    border-bottom: 1px solid #a39d9d; */
    /* border: 1px solid #a39d9d; */
    border: 1px solid var(--darkblue);
    padding: 8px;
    text-align: center;
}


.table tr{
    transition: background-color 0.1s;
}
  
/* .table tr:nth-child(even) {
    background-color: #ffffff;
}
  
.table tr:nth-child(odd) {
    background-color: #cecccc;
} */


.table tr:hover{
    /* background-color: #cfe2c2; */
    background-color: white;
}


.table caption{
    /* background-color: #e6e9e4; */
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 12px 10px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}


.search-exp-results{
    width: 50%;
    margin: 5px 5px 10px 40px;
    /* margin: auto; */
    padding: 7px;
    border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
}


.search-exp-results-rep{
    width: 50%;
    margin: 5px 5px 10px 30px;
    /* margin: auto; */
    padding: 7px;
    border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
}


.search-exp-results-cnd-view{
    width: 50%;
    margin: 5px 5px 10px 35px;
    /* margin: auto; */
    padding: 7px;
    border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
}


#searchbutton{
    margin: 5px 5px 10px 30px;
    padding: 7px;
    border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
}


#searchbutton:hover
{
    cursor: pointer;
}


fieldset{
    margin: 20px;
    margin-left: 30px;
    margin-right: 30px;
    /* color: #6948ed; */
    color: var(--purple);
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
    padding-bottom: 50px;
}
  

/* a{
    text-decoration: none;
} */


.jd-file{
    width:95%;
    overflow: auto;
    margin-left: 30px;
}


.jd-hdr{
    margin:10px;
    padding: 10px;
    /* color: #6948ed;
    border: 1px solid #c2c5c1;
    background-color: #e6e9e4; */
    color: var(--purple);
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    height: 40px;
    align-content: center;
}


.jd-desc{
    margin:10px;
    padding: 10px;
    color: black;
    /* border: 1px solid #c2c5c1; */
    border: 1px solid var(--darkblue);
    background-color: #ffffff;
    align-content: center;
}


pre{
    font-size: 15px;
}


.txtcn{
    margin: auto;
    align-content: center;
    text-align: center;
    margin:250px;
}


.message {

    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--lightblue);
    color: white;
    border-radius: 10px;
    height: 50px;
    width: 50%;

    text-align: center;

    padding: 20px;

    margin-left: 25%;

    /* width: auto; */
    height: auto;

}
 

.message1 {

    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--lightblue);
    color: white;
    border-radius: 10px;
    height: 50px;
    width: 50%;

    text-align: center;

    padding: 20px;

    margin-left: 25%;

}
 

.close {
    color: black;
    font-weight: bold;
    float: right;
    cursor: pointer;
    transition: 0.3s;
    padding: 20px;
}
  

.close:hover {
    /* color: #6948ed; */
    color: var(--purple);
}


.dropdown{
    position: relative;
    display: inline-block;
    /* overflow: hidden; */
}


.dropdown-content{
    display: none;
    position: absolute;
    /* background-color: #ffffff; */
    background-color: var(--lightblue);
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
    font-size: 14px;
}
  

.dropdown-content a{
    color: white;
    padding: 10px 10px;
    text-decoration: none;
    display: block;
    text-align: center;
}
  

/* .dropdown-content a:hover {background-color: #c2c5c1;} */

.dropdown-content a:hover {background-color: var(--darkblue);}
  
.dropdown:hover .dropdown-content {display: inline-block;}
  
/* .dropdown:hover .dropbtn {background-color: #3e8e41;} */


#form1, #form2, #form3 {
    display: none;
}


pagination-container {
    margin: auto;
}


.pagination {
    /* position: absolute; */
    bottom: 50px;
    align-content: center;
    text-align: center;
    width: 98vw;
    /* border: solid #313950; */
    margin: 15px;
    /* margin-right: 10px; */
}


.pagination ul {
    text-decoration: none;
}


.pagination a {
    color: var(--purple);
    padding: 10px 10px;
    text-decoration: none;
}


.pagination a:active {
    background-color: var(--darkpurple);
    color: white;
}


.pagination a:hover {
    background-color: white;
}


.pagination a:visited {
    text-decoration: underline;
}


.pagenumbercolor {
    background-color: var(--primary-color);
}


.dashboard-container{

    margin: 2px;
    /* border: 2px solid white; */

}


.dashboard-title{

    height: 40px;
    width: auto;
    padding: 5px;
    margin: 5px;
    /* margin-right: 2px; */
    border: 2px solid var(--purple);
    align-content: center;
    text-align: center;
    color: var(--purple);
    border-radius: 5px;
    font-size: 18px;
    background-color: var(--primary-color);

}


.dashboard-filter{

    height: 70px;
    width: 99.25%;
    padding: 5px;
    margin: 0px 5px 5px 5px;
    border: 2px solid var(--purple);
    border-radius: 5px;
    /* display: flex; */
    /* justify-content: space-between; */
    float: left;
    align-content: center;
    /* text-align: center; */
    color: var(--purple);
    /* margin: auto; */

}


.dashboard-filter-element{

    /* margin: 2px; */
    height: auto;
    padding: 2px;
    /* margin-bottom: 20px; */
    /* background-color: black; */
    /* border: 1px solid black; */

}


.dashboard-filter-label {

    width: 20%;
    float: left;
    font-size: 14px;
    padding: 2px;
    /* border: 1px solid black; */

}


.dashboard-filter-control-container {

    /* width: 80%; */
    /* float: left; */
    width: 100%;
    font-size: 14px;
    /* border: 1px solid black; */

}


.dashboard-filter-control {

    width: 100%;
    padding: 2px;
    /* border-radius: 3px;
    /* border: 1px solid #c2c5c1; */
    /* border: 1px solid var(--primary-color); */
    /* transition: box-shadow 0.3s; */

}


.dashboard-cardholder{

    height: 180px;
    width: auto;
    padding: 20px;
    margin: 5px;
    border: 2px solid var(--purple);
    align-content: center;
    text-align: center;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    
}


.dashboard-card{

    height: 120px;
    width: 200px;
    margin: 10px 22px 20px 22px;
    border: 1px solid var(--purple);
    justify-content: space-between; 
    display: inline-block;
    /* float: left; */

}


.dashboard-cardtitle{

    height: 55px;
    width: 200px;
    margin: auto;
    padding: 2px;
    background-color: var(--primary-color);
    align-content: center;
    text-align: center;
    color: var(--purple);
    /* border: 1px solid var(--purple); */

}

.dashboard-cardnumber{

    height: 40px;
    width: 200px;
    margin: auto;
    padding: 2px;
    align-content: center;
    text-align: center;
    color: var(--purple);
    background-color: white;
    border: 1px solid var(--purple);

}


.dashboard-cardpercent{

    height: 25px;
    width: 200px;
    margin: auto;
    padding: 2px;
    font-size: 10px;
    align-content: center;
    text-align: center;
    color: var(--purple);
    /* border: 1px solid var(--purple); */

}


.dashboard-table-container{

    height: 295px;
    width: auto;
    padding: 20px;
    margin: 5px;
    border: 2px solid var(--purple);
    align-content: center;
    text-align: center;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    overflow: auto;

}


.dashboard-table{

    height: 250px;
    width: 50%;
    padding: 5px;
    margin: 5px;
    /* margin-right: 2px; */
    border: 2px solid var(--purple);
    /* align-content: center; */
    text-align: center;
    color: var(--purple);
    border-radius: 5px;
    font-size: 15px;
    float: left;
    overflow: auto;

}

.key{

    width: 30%; 
    border: 2px solid var(--primary-color); 
    text-align: center;
    align-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;

}


.key1{

    width: 100%; 
    border: 2px solid var(--primary-color); 
    /* text-align: center; */
    align-content: center;
    padding: 10px;
    border-radius: 5px;

}


.resourcesidebar1{
    /* background-color: #f8faf8; */
    /* background-color:#ffffff; */
    background-color: var(--secondary-color);
    min-height: 680px;
    max-height: 680px;
    width: 20%;
    /* padding-top: 0px; */
    /* margin-right: 4px;
    margin-left: 5px; */
    padding: 10px;
    margin: 0px;
    /* border-radius: 7px; */
    border: 1px solid var(--primary-color);
    /* position: sticky; */
    float: left;
    overflow: auto;
    /* display: inline; */
}


.resourcesidebar2{
    /* background-color: #f8faf8; */
    /* background-color:#ffffff; */
    background-color: var(--secondary-color);
    min-height: 680px;
    max-height: 680px;
    width: 80%;
    /* padding-top: 0px; */
    /* margin-right: 4px;
    margin-left: 5px; */
    padding: 20px;
    /* margin: 20px; */
    margin-top: 20px;
    margin-left: 20px;
    /* border-radius: 7px; */
    border: 1px solid var(--primary-color);
    /* position: sticky; */
    overflow: auto;
    color: var(--purple);
}

.resourcesidebar2 p{

    color: var(--darkblue)
}


.indexcard{
    /* background-color: #f8faf8; */
    /* background-color:#ffffff; */
    background-color: var(--primary-color);
    height: auto;   
    width: 90%;
    /* padding-top: 0px; */
    /* margin-right: 4px;
    margin-left: 5px; */
    padding: 15px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid whitesmoke;
    /* position: sticky; */
    /* float: left; */
    /* overflow: auto; */
    text-align: center;
    color: var(--darkblue);

}

.indexcard a{

    text-decoration: none;
    color: var(--darkblue);
    transition: background-color 0.1s;
    padding: 5px;
    border-radius: 5px;

}


.indexcard a:hover{

    background-color: whitesmoke;

}


.indexcardsubtitle{

    background-color: var(--secondary-color);
    height: auto;   
    width: 90%;
    /* padding-top: 0px; */
    /* margin-right: 4px;
    margin-left: 5px; */
    padding: 5px;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
    /* border: 1px solid whitesmoke; */
    /* position: sticky; */
    /* float: left; */
    /* overflow: auto; */
    text-align: center;
    color: var(--purple);
    transition: background-color 0.1s;

}

.indexcardsubtitle a{

    text-decoration: none;
    color: var(--darkblue);
    font-size: 13px;

}


.indexcardsubtitle:hover{

    background-color: whitesmoke;

}


/* card styles */


.btmcard-container {
    background-color: #5c6c9e;
    width: 100%;
    position: relative;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
}


.btmcard {
    width: 20%;
    margin: 20px;
}


.btmcard-header {
    padding: 10px 18px;
    color: whitesmoke;
    text-align: center;
}
  

.btmcard-body {
    padding: 18px;
    color: whitesmoke;
    text-align: center;
}
 
  
.btmcard-footer {
    padding: 10px;
    text-align: right;
}
  

.mpcard-container {
    height: auto;
    margin: 40px;
  }
  

.mpcard {
    width: 80%;
    margin: 80px auto;
    /* margin: auto; */
    margin-bottom: 80px;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 5px;
    align-self: center;
}


.mpcardimg {
    width: 50%;
    margin: 80px auto;
    /* margin: auto; */
    margin-bottom: 80px;
    padding: 0px;
    background-color: whitesmoke;
    border-radius: 5px;
    align-self: center;
    float:left;
    height: 90%;
}


.mpcardblw {
    width: 60%;
    margin: 40px auto;
    margin-bottom: 40px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    /* border: 2px solid black; */
}


.mpcardblwsv {
    width: 40%;
    margin: 0 auto;
    padding: 2px;
    display: flex;
    justify-content: space-around;
}


.mpcardblwmessage
{
    width: 60%;
    margin: 40px auto;
    margin-bottom: 40px;
    padding: 20px;
    display: block;
    justify-content: space-around;
    border: 2px solid black;


    align-items: center;
    text-align: center;
    margin-left: 25%;
    

    /* width: auto; */
    height: auto;
}


.float-center{

    float: center;
}

.mpcardblw div {
    align-items: center;
}

.mpcard-header1 {
    padding: 5px;
    color: var(--darkblue);
    text-align: center;
    font-size: 36px;
}


.mpcard-header2 {
    padding: 5px;
    color: var(--darkblue);
    text-align: center;
    font-size: 24px;
}


.mpcard-body {
    padding: 5px;
    color: var(--darkblue);
    text-align: left;
}


.btnlm {
    margin: 0px;
    padding-top: 8px;
    padding-left: 55px;
    padding-right: 55px;
    color: white;
    text-decoration: none;
    width: auto;
}


.btnlm a{
    color: white;
    text-decoration: none;
    display: block;
    background-color: var(--lightblue);
    border-radius: 5px;
    padding: 7px;
}


.btnlm a{
    transition: background-color 0.1s;
}


.btnlm a:hover
{
    background-color: var(--darkblue);
}


.prsv-container
{
    height: 80px;
    width: 200px;
    margin: 20px auto;
    /* border: 1px solid var(--purple); */
    justify-content: space-between;
    display: inline-block;
    align-content: top;
    text-align: center;
}


.prsv-tag1
{
    margin: 0px auto;
    color: white;
    text-decoration: none;
}


.prsv-tag1 a
{
    color: white;
    text-decoration: none;
    background-color: var(--lightblue);
    border-radius: 5px;
    padding: 7px;
    transition: 0.1s;
}


.prsv-tag1 a:hover
{
    background-color: var(--darkblue);
}


.prsv-tag2
{
    align-content: center;
    color: var(--darkblue);
    /* width: 200px; */
    font-size: 13px;
    margin-top: 10px;
}


.prcblc-container
{   
    /* justify-content: space-around; */
    /* display: flex; */
    /* display: inline-block;
    text-align: center;
    align-items: center; */

    margin: 30px 100px 30px 100px;
    /* border: 1px solid var(--purple); */
    justify-content: space-evenly;
    display: block;
    align-content: top;
    text-align: center;
}


.prcblc 
{
    float: left;
    width: 25%;
    /* padding: 5px; */
    /* margin: 5px; */
    margin: 0px auto;
    border: 1px solid var(--primary-color);
    color: var(--darkpurple);
}


.prcblc1
{
    float: left;
    width: 25%;
    /* padding: 5px; */
    /* margin: 5px; */
    margin: 0px auto;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--darkpurple);
    font-weight: bold;
    font-size: 14px;
    /* border-radius: 7px; */
}


.prcul 
{
    list-style-type: none;
    /* margin: 2px; */
    padding: 2px;
    text-align: center;
    /* border: 1px solid var(--primary-color); */
}


.prcul li
{
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    /* padding: 5px auto; */
    text-align: center;
    align-content: center;
    border: 1px solid lavender;
    height: 50px;
    background-color: var(--secondary-color);
    /* border-radius: 7px; */
}


.prcul .lstbr
{
    border: 1px solid var(--secondary-color);
}


.prcul .libkg
{
    background-color: var(--primary-color);
}

.prcul .libkg1
{
    background-color: var(--lightblue);
    color: whitesmoke;
    font-size: 16px;
    font-weight: bold;
}

.prcul .libkg2
{
    border: 1px solid var(--secondary-color);
}


.prcul .libkg3
{
    font-size: 12px;
}


.prcul .libkg4
{
    font-size: 12px;
}


.prcbtn 
{
    background-color: var(--lightblue);
    border-radius: 7px;
    color: whitesmoke;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    width:auto;
}


.btms-container
{   
    margin: 10px;
    /* border: 4px solid var(--purple); */
    justify-content: space-evenly;
    display: block;
    align-content: top;
    text-align: center;
    padding: 5px;
    clear: both;
}


.hideblock {
  display: none;
}
  

.mailicon:hover + .hideblock {
  display: block;
  color: black;
}


/* small devices */

@media only screen and (max-width: 768px){

    .navbarmenu
    { 
        height: auto;
        width: 100%;
        margin: auto;
        padding: 10px;
        /* border: 2px solid black; */
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .sidebar-container
    {
        width: 100%;
        text-align: center;
        margin: auto;
        /* border: 2px solid black; */
    }
    .sidebar1
    {
        float:none;
        width: auto;
    }
    .sidebar2
    {
        width: 100%;
        margin: auto;
        text-align: center;
        /* border: 2px solid lightseagreen; */
    }
    .sidebar1-item
    {
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 30px;
        margin-right: 30px;
    }
    .footer
    {
        float: none;
        width: 100%;
    }
    .sidebar2-trial
    {
        /* width: auto; */

        width: auto;
        /* margin: auto;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center; */
    }
    .form-container
    {
        /* width: auto; */

        width: 100%;
        margin: auto;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .form-label-or a, p, .btn
    {
        clear: both;
        width: 100%;
        margin: auto;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .form-label-or p span
    {
        display: block;
        margin-top: 40px;
    }
    .form-label-or .btn
    {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .form-element
    {
        display: block;
        margin-top: 40px;
    }
    .form-container-1
    {
        overflow: auto;
    }
    .dashboard-filter-container-1
    {
        overflow: auto;
    }
    .mpcard-container, .btnlm, .prcblc-container
    {
        width: auto;
        float: center;
        margin: auto;
        /* border: 2px solid purple; */
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .prcblc-container li, .prcblc-container .prcbtn, .prcul .libkg3
    {
        font-size: 10px;
    }
    .prcul .libkg4
    {
        font-size: 9px;
    }
    .mpcard-header2
    {
        width: auto;
        float: center;
        margin: auto;
        text-align: center;
    }
    .mpcardblw
    {
        /* width: auto;
        clear: both; */
        /* border: 2px solid purple; */
        width: auto;
        margin: 40px auto;
        margin-bottom: 40px;
        padding: 20px;
        float: none;
        /* display: block; */
        /* display: flex; */
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .mpcardblw li, .mpcardblwsv
    {
        width: auto;
        display: flex;
        padding: 10px;
        justify-content: center;
        align-items: center;
        text-align: center;
    } 
    .btmcard-container
    {
        width: 100%;
    }
    .btmcard-container .btmcard
    {
        float: none;
        display: block;
        width: auto;
        /* border: 2px solid purple; */
        align-items: center;
        display: block;
        /* margin: auto; */
        clear: both;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .btmcard-body
    {
        display: block;
        float: center;   
        /* margin: auto;  */
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .btmcard-container .btmcard .btmcard-body
    {
        clear: both; 
    }
    .footer a
    {
        display: block;
        float: center;   
        /* margin: auto;  */
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px;
    }
    .resourcesidebar1
    {
        clear: both;
        width: 100%;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .resourcesidebar2
    {
        clear: both;
        width: 100%;
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: auto;
    }
    /* mpcard, .mpcard-header1, .mpcard-header2, .mpcard-body .btmcard .btmcard-body */

    /* .mpcardblw li, .btms-container
    {
        width: 100%;
        float: none;
        overflow-x: none;
    } */

}

/* large devices */

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

    .navbar
    { 
        /* height: 80px; */
        height: auto;
    }
    .navbarmenu
    { 
        float: left;
    }
    .navbarmenu-item
    { 
        float: left;
    }
    .sidebar-container
    {
        height: 600px;
    }
    .sidebar1
    {
        float:left;
        width: 20%;
        /* width: auto; */
    }
    .sidebar2
    {
        float:left;
        width: 100%;
        max-height: 600px;
        min-height: 600px;
        /* width: auto; 79 */
        /* max-height: auto;
        min-height: auto; */
    }
    .navbarmenu-item-logo
    {
        float: left;
    }

    .form-label {
        width: 20%;
        float: left;
    }
    .form-control-container{
    width: 80%;
    float: left;
    }
    .form-control-container-1{
        width: 25%;
        float: left;
    }
    .form-control-container-2{
        width: 55%;
        float: left;
    }
    .form-element-1{
        width: 25%;
        float: left;
    }

    .dashboard-filter-label {
        width: 50%;
        float: left;
        align-content: center;
        text-align: center;
    }

    .dashboard-filter-control-container{
    width: 50%;
    float: left;
    align-content: center;
    text-align: center;
    }

    .dashboard-filter-control-container-1{
        width: 25%;
        float: left;
    }

    .dashboard-filter-control-container-2{
        width: 55%;
        float: left;
    }

    .dashboard-filter-element{
        width: 70%;
        float: left;
    }

}