/*** Side nav  **/
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    box-shadow: 0 -0.8rem 0.8rem rgb(36 36 36 / 12%);
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
    background: #fff;
}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}
.sidenav {
    right: 0;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
.sidenav {
    right: 0;
   z-index: 9999;
       padding-bottom: 68px;
               }
.Sidenav_menu  {
    margin: 0;
    box-sizing: border-box;
    /*text-align:center;*/
}
.Sidenav_menutitle  {
  margin-top: 55px;
    height: auto;
    font-weight: bolder;
    font-size: 32px;
    color: #fff;
    line-height: normal;
    padding:0px 30px 0px;
}
.newclass  {
      width:600px;
}
.removeclass  {
    width:0px;
}
 .switch {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 25px;
    }

    .switch input {display:none;}

    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
    }

    .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    }

    input:checked + .slider {
    background-color: #2ab934;
    }

    input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
    }

    /*------ ADDED CSS ---------*/
    .slider:after
    {
    content:'Disable';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    }

    input:checked + .slider:after
    {  
    content:'Enable';
    }

    button.close {
        padding: 0;
        background-color: transparent;
        border: 0;
    }
    .close {
        position: absolute;
        right: 3px;
        top: 0px;
        font-size: 30px;
        font-weight: bold;
        color: #e38305;
    }
    .close:hover,
    .close:focus {
    color: #0A0A0A;
    cursor: pointer;
    }
    .close-btn {
        float: right;
        font-size: 1.9rem;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
        background-color: transparent;
        border: 0;
    }
    .btn-delete{
        position:absolute;
    }
    .searchFindBtn  {
        position: absolute;
        left: 85%;
        top: 1px;
        height: 41px;
        padding: 4px 20px !important;
    }
    .multipleImages>div:first-child  {
        padding-left: 0px !important;
     }
     .multipleImages img  {
       border: 3px solid var(--bs-body-bg) !important;
       box-shadow: var(--bs-box-shadow);
       border-radius: 0.75rem !important;
       background-repeat: no-repeat;
       background-size: cover;
     }
     
     
     .switch2 {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 25px;
    }

    .switch2 input {display:none;}

    .slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
    }

    .slider2:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    }

    input:checked + .slider2 {
    background-color: #2ab934;
    }

    input:focus + .slider2 {
    box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider2:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
    }

    /*------ ADDED CSS ---------*/
    .slider2:after
    {
    content:'Draft';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    }

    input:checked + .slider2:after
    {  
    content:'Published';
    }
  /*//==============================*/
   .switch3 {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 25px;
    }

    .switch3 input {display:none;}

    .slider3 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
    }

    .slider3:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    }

    input:checked + .slider3 {
    background-color: #2ab934;
    }

    input:focus + .slider3 {
    box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider3:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
    }

    /*------ ADDED CSS ---------*/
    .slider3:after
    {
    content:'Pending';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    }

    input:checked + .slider3:after
    {  
    content:'Approved';
    }
   .sideNavForm{
       padding: 50px;
        position: relative;
        z-index: 1;
        max-width: 490px;
        padding-left: 60px;
        z-index: 2;
        background: var(--color-white);
        border-radius: var(--radius);
   } 
    .exportEnrollButton{
        width: auto;
        display: block;
        margin-bottom: 16px;
        margin-right: 10px;
    }