/*

  Web App UI Builder Library v1.0

  Developed for Circuit PUNKware
  Developed By Tristan S

  Refer to README.txt file for full Details


*/




body {
    font-family: Tahoma, Verdana, sans-serif !important;
    margin:0px;
    color: #595959; /* Slightly Black Text  */


    /* Apply to accomidate no bootstrap */
     margin: 0;
     font-family: sans-serif;
}

/* Apply to accomidate no bootstrap */
* { box-sizing: border-box; }
p { margin: 0 0 1rem 0; }




h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: calc(1.325rem + .9vw);
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}


.nohighlight {
    cursor:default;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Experemental */
.containtext {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.noscroll
{
    overflow:hidden;
}



#maindisplay {
  margin-left: 15px;
  height: auto; /* stretches div to hold content instead of letting it overflow */

  margin-top: 10px;
  margin-right: 15px;

}



.pageheader
{
  position: sticky;
  z-index:1;
  top: 0px;
  background-color: #f2f2f2;
  box-shadow: 0px 0px 7px 0px #bdbdbd;
  height: 75px;
  width: 100%;
}


.pagetitle
{

}


/* Box used to divide in to sections to put UI components in */
.sectionsbox{
  display: flex;
  width:100%;
  overflow:hidden;
}



.centerverticallay{
  position:absolute !important;
  top:50% !important;
  transform: translateY(-50%) !important;
}

.centerhorizontally {
  /* Works for normal block layout and flex/grid in many cases */

  position: relative !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align:center;

  align-self: center !important;   /* flex/grid */
  justify-self: center !important; /* grid */

}





/* GOOD  ***   */
.notifyprompt
{
  padding: 30px;
  margin: auto;

  border-radius: 10px;
  /*box-shadow: 0px 0px 2px 0px;*/
  border: solid #d7d7d7 1px;

  position: relative; /* Allows the Close button to be positioned properly */

}


.closebtn {
  /* be sure to add '×' to the element for the X   */
  position: absolute;
  top: 2px;
  right: 12px;
  background: none;
  border: none;
  font-size: 36px;
  padding: 0px;
  cursor: pointer;
  line-height: 1;
  font-weight: lighter;
}
.closebtn:hover {
  opacity: 0.7;
}



/*



*/


.basicbtn
{
  cursor:pointer;
  margin-right:7px;
  border-style: solid;
  vertical-align: middle;
  border-radius: 7px;
  padding-right:10px;
  padding-left:10px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #595959;
  box-shadow: 0px 0px 1px 0px;
  border-width: 0px; /* Assure no Border */
  margin-bottom: 5px; /* helps buttons stack nicely */
  padding: 6px 12px; /* replaces Bootstrap's padding */

  font-size: 14px;
  line-height: 1.4;
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;

}

.basicbtn:hover
{
  color: #595959;
  background-color: #d7d7d7;
  border-color:#bfbfbf;
}


/* Disabling a bubble button is not supported */
.bubblebtn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px; /* bubble shape */
  border: 1px solid #d9d9d9;
  margin-right:14px; /* helps buttons sit next to eachother nicely */
  margin-bottom: 5px; /* helps buttons stack nicely */
  background: linear-gradient(135deg, #ffffff, #e5e5e5);
  color: #444;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.bubblebtn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ffffff, #e9e9e9);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.bubblebtn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.10);
}


/* Disable class for making basic buttons disabled */
.disblebtn
{
  margin-right:7px;
  border-style: solid;
  border-radius: 7px;
  padding-right:10px;
  padding-left:10px;
  padding-top: 3px;
  padding-bottom: 3px;

  font-size: 14px;
  line-height: 1.4;
  padding: 6px 12px;
  font-family: inherit;

  color: #bdb4b4;
  background-color: #e8e8e8;
  border-color: #e8e7e7;
  margin-bottom: 5px; /* helps buttons stack nicely */


}

.pagedivider
{
  border: none;
  border-top: 2px solid #d2d2d2;
  margin: 20px auto;
  width: 75%;
}







.basicinput {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.basicinputdsbl{
  background-color: #eee;
  cursor: not-allowed;
}


/* Labled Input Area */
.labelinputarea {

  display:inline-block;
  max-width: 400px;
  min-width: 100px;

}




/*

  Entries List UI

  For Displaying the List of entries on to a table

*/

.tableheader, .tablerow {
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px;
  margin-top: 3px;
  width: fit-content;
}

.tableheader, .tablerow {
  flex: 1 1 auto;
}

.tableheader span, .tablerow span {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 100px;
  white-space: nowrap;
  margin: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}


.tableheader {
    user-select: none;
    background-color: #eee;
    border-radius: 6px 6px 6px 6px;
}




/*
Old header resizer works great but hard to grab.
The main advantage of this one is the box-shadow that makes it blur out
*/
.headeresizer {
  height: 24px;
  background-color: #ccc;
  cursor: ew-resize;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  transform: translateY(39%);
  min-width: 2px;
}





.optionsbutton
{
   position: absolute;
   top: 20px;
   right: 20px;
  color: #a2a2a2;
  cursor:pointer;
  width: 36px;
  height: 36px;
  display: block;
  fill: currentcolor;
  box-shadow: 0px 0px 1px 0px;
  border-radius: 8px;
  border: solid #d2d2d2 1px;
}




.optionsbutton:hover
{
  background-color: #E7E9EB;
}




.cornersquare {
/* Top left section of square */
padding-right:14px;
}

.tableheader span {
  color:#aeabab;
  font-weight: bold;
  text-align: center;
}

.tablerow span {
padding-left: 15px;
}



.tablepanel
{
  /*border: solid #d9d9d9 1px;
  border-radius: 15px;
  */
  overflow-x: auto;
  padding-bottom: 10px;
  background-color: white;
  border-radius: 6px 6px 6px 6px;
  padding: 5px;

  margin-right: 20px;
  margin-left: 20px;
}

.tablerow:hover {
  background-color: #E7E9EB;
  cursor:default;
}

.tablepanel-btnpanel
{
  margin-top: 10px;
  margin-bottom: 14px;
  margin-left: 21px;
  margin-right: 21px;
}






.pagefooter {
  margin-left:50px;
  text-align: center;
  margin-bottom: 25px;
  padding-right: 15px;
  padding-left: 15px;
}

.pagefooter > a
{
    margin-left:20px;
    font-size:15px;
    color:gray;
    text-decoration: none;
}

.pagefooter > a:hover
{
  color: #4a4a4a;
}


/* Copy to clipboard text */
.clipboardtext {
  cursor:pointer;
}

.clipboardtext:hover {
  text-decoration: underline;

}




#tabtops
{
    margin-top: 10px;

    white-space: nowrap;
    overflow:auto;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: -1px; /* Allows for borderless connection of top and body of focused tab */
}

.tabtop
{
    background-color:#eee;
    border:solid rgb(213, 213, 213) 1px;
    display: inline-block;
    border-radius: 10px 10px 0px 0px;
    padding-right:10px;
    padding-left:10px;
    cursor:pointer;
    padding: 5px;
    padding-right: 7px;
    padding-left: 7px;
}

#tabbedarea
{

margin-bottom:20px;
border-radius: 11px 11px 11px 11px;
}



.tabbody
{
    background-color: white;
    border: 1px solid rgb(213, 213, 213);
    /*height:100vh;*/
    padding: 25px;
    border-radius: 0px 10px 10px 10px;

    overflow-x: auto;
    overflow: auto;

    min-height: calc(100vh - 138px);



}






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

    .labelinputarea
    {
      width:95% !important; /* When the screen is smaller make all inputs full width */
    }

    .tabtop
    {
    border-radius: 0px; /* Make tabs Boxy when in mobile */

    }

}



.toast2 {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #ffffff;
  padding: 16px 22px;
  border-radius: 14px;
  border: 1px solid #f0e6ff;
  animation: toastpop 0.5s ease;
}

@keyframes toastpop {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}




#usericon
{
    border-radius: 13px;
    width: 45px;
    margin-right: 15px;
    cursor: pointer;
    border: solid #c6c6c6 1px;
}


#usericon:hover
{
    box-shadow: 0px 0px 3px 1px gray;
    border-color: #828282;
}



.boxview
{
    margin: 0 auto;
    padding: 25px;
    border-radius:10px;
    margin-top: 30px;
    border: solid #d7d7d7 1px;
    position: relative;
}


.boxview2
{
    margin: 0 auto;
    padding: 25px;
    border-radius:10px;
    margin-top: 30px;
    border: solid #d7d7d7 1px;
    position: relative;
    border: solid #b0b0b0 1px;
    box-shadow: 0px 0px 4px 0px;
    width:99%
}



@media (max-width: 550px)
{
    .boxview{
        width: 100%;
        margin: 0 auto;
        padding: 15 px;
        border:none;
        border-radius:none;
        box-shadow: none;
        margin-top: 30px;
    }

/* For AddDualView() function html to be responsive */
.stack { flex-direction:column; }


}





/* Expanded Image Background */
#expandimgbg {
  display:none;
  position:fixed;
  inset:0;
  background-color:#00000038;
  padding:40px;
  z-index:3;
  overscroll-behavior:contain;
}

/* Expanded Image */
#expandedimg {
    width:100%;
    height:auto;
    max-height:90vh;
    max-width:100%;
    margin:auto;
    display:block;
    object-fit:contain;
}

/* Expandable Image */
.expandableimg
{
  border-radius: 10px;
  margin-bottom: 25px;
  margin-top: 25px;
}




.searchbar
{
  width: 45%;
  border-radius: 5px;
  border: none;
  height: 36px;

}





/* Toggle Ball */

.toggle {
    width: 50px;
    height: 24px;
    background-color: #f2f2f2;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #dfdfdf;
}

.toggleball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 2px;
    transition: .2s;
    border: 1px solid #ddd;
}

.toggle input:checked + .toggleball {
    left: 27px;
    background-color: #e3e3e3;
    border: 1px solid #d2d2d2;
}





/*  Right Click Menu */

.rightclickmenu
{
    position: absolute;
    background-color: white;
    min-width: 80px;
    font-size:14px;
    border-radius: 6px;
    box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.rightclickmenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 6px;
    display: block;
}

.rightclickmenu a:hover
{
    background-color: #f1f1f1;
}


/*  ------------- Options Button Menu ---------- */


.optionsmenu
{
    position: absolute;
    background-color: white;
    min-width: 80px;
    font-size:14px;
    border-radius: 6px;
    border: solid #d7d7d7 1px;
    z-index: 1;
}

.optionsmenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    border-radius: 6px;
    display: block;
}

.optionsmenu a:hover
{
    background-color: #f1f1f1;
}


/**/




 .boxlist
 {
   position:relative; /* Required for placing an Option Button within */
   box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
   transition: --angle 1.5s ease, box-shadow 1s ease;
   margin-top:25px;
   min-height: 100px;
   padding-right: 30px;
   padding-left: 30px;
   padding-top:15px;
   padding-bottom:15px;
   border-radius: 10px;
   border: solid #d2d2d2 1px;

 }

 .boxlist:hover {
   transform: translateY(-2px);
 }









  .basicdetails
  {
    position:relative; /* Required for placing an Option Button within */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    transition: --angle 1.5s ease, box-shadow 1s ease;
    margin-top:25px;
    padding-right: 30px;
    padding-left: 30px;
    padding-top:15px;
    padding-bottom:15px;
    border-radius: 10px;
    border: solid #d2d2d2 1px;

  }




/* ------------ Page Menu ------------- */

.pagemenu {
    display:none;
    width:200px;
    height:100vh;
    background-color: white;
    font-family:sans-serif;
    transition: 0.5s;
    position: fixed;
    top:0px;
    border: solid #eee 1px;
    font-size: 20px;
    padding-top: 25px;
}


.pagemenu a
{

    display:block;
    padding:10px 14px;
    color:black;
    text-decoration:none;
}




@media screen and (max-width: 550px)
{
  #pagemenu {
      width:100%;
  }

  .submenulinks {
      position: static !important;
      left: 0 !important;
      top: 0 !important;
      display: none; /* JS will toggle this */
      padding-left: 20px; /* optional indent */
      border: solid #eee 1px;
  }

}





#pagemenu a:hover
{
    display:block;
    padding:10px 14px;
    background-color: #ececec;
    text-decoration:none;
}


.submenutext
{
    padding:10px 14px;
    color:black;
    cursor:pointer;
}


.submenutext:hover
{
  background-color: #ececec;
}

.submenulinks
{
    display:none;
    position:absolute;
    top:0;
    left:100%;
    background-color: white;
    min-width:150px;
    z-index:999;
    border: solid #eee 1px;
}



.submenu:hover .submenulinks {

 display:block;
}

.submenu
{
    position:relative;
}

.menuclosebtn
{
    cursor:pointer;
    padding: 13px;
    display:block;
    font-weight: bold;
    font-size: 20px;
}

.menuclosebtn:focus,
.menuclosebtn:active {
  outline: none;
  box-shadow: none;
}


#menubtn {
  margin-top:10px;
  font-size: 20px;
  cursor: pointer;
  background-color: #ccc;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 0px 10px 10px 0px;
  position: fixed;
  display:block;
  top: 0px;
}

#menubtn:hover
{
  background-color: #b7b3b3;
}




/* ----- File Uploader ------  */


     .dragdroparea {
         border: 3px dashed #9bb0c8;
         padding: 30px;
         border-radius: 12px;
         background: #f9fbfd;
         cursor: pointer;
         transition: 0.3s;
         color: #555;
         min-height: 120px; /* keeps it stable */
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
         overflow: hidden; /* prevents text overflow */
     }

     .dragdroparea.dragover {
         background: #e3f2ff;
         border-color: #4a90e2;
         color: #357ABD;
     }


    .uploadfileinput {
        display: none;
    }

    .uploadfilebtn {
        margin-top: 20px;
        padding: 12px;
        width: 100%;
        background: #4a90e2;
        border: none;
        color: white;
        font-size: 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
    }

    .uploadfilebtn:hover {
        background: #357ABD;
    }









    /* ----- Hover Text  ----- */

    .hovertexttarget
    {
      position: relative;
    }

    .hovertext
    {
      position: absolute;
      bottom: 120%;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 6px 10px; /* Adjust size of bubble */
      font-size: 15px; /* Adjust the size of the text */
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 10;
    }

    .hovertext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    .hovertexttarget:hover .hovertext.hoverhovertext
    {
      opacity: 0.85;
    }





/* ------------------------------------------------ */
 /* ----------------- pretty UI  CSS  -------------- */

 /*
  Developed to plug in to exsisting developed UI

  The Look and Feel for this UI is a beautiful pastel
  shiny gem like look. Shining and calm its supposed to
  make the UI feel appealing and satisfying to use

 */


  .prettybg {
      background: linear-gradient(135deg, #f8e8ff, #e0f7ff);
      /*background: linear-gradient(135deg, #fff4ff, #e8f4ff, #f4fff4);*/
      font-family: "Poppins", sans-serif;
  }

  .prettyother {
      /* Applied to elements that dont fit the other prettyUI Classes for prededined elements
      General enough to make any other element pretty */

        background: linear-gradient(135deg, #ffd6e8, #d6f0ff, #e8ffd6);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        border: solid #dddbdb 1px !important;
        color: #c8c8c8 !important;

  }

  .prettytoast {

    background: linear-gradient(15deg, #ffe3ee, #d1eeff);
    box-shadow: 0 6px 20px rgba(255, 179, 255, 0.25);

  }


  @property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 15deg;
  }

  .prettybox {
    --angle: 15deg;
    background: linear-gradient(var(--angle), #ffedf4, #e4f5ff);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    transition: --angle 1.5s ease, box-shadow 1s ease;
  }

  .prettybox:hover {
    --angle: 220deg;
    box-shadow: 0px 0px 8px pink;
  }




    .prettybox2 {
      position: relative;
      border-radius: 20px;
      z-index: 0;
      border: none; /* remove the overridden styling to allow the pretty border using "before" */
    }

    .prettybox2::before {
      content: ""  !important;
        position: absolute  !important;
        inset: 0  !important;
        padding: 1px  !important;
        border-radius: inherit  !important;
        background: linear-gradient(to right, #cacaff, #ffbff5) !important;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)  !important;
          mask-composite: add, add  !important;
        -webkit-mask-composite: xor  !important;
        mask-composite: exclude  !important;
        pointer-events: none  !important;
    }

    .prettybox2:hover::before {
      /* Slightly Change it  maybe ? */

     }






   .prettybox3 {
     position: relative;
     border-radius: 20px;
    z-index: 0;
    border: none;
    box-shadow: 0 0 6px 3px rgba(200, 218, 238, 0.56);
   }



  .prettyinput {

      padding: 12px 15px;
      border-radius: 14px;
      border: 1px solid #b9dafd8c !important; /* Nice thin Blue Line */
      background: linear-gradient(15deg, #ffedf4, #e4f5ff);
      outline: none;
      font-size: 15px;
      height: 42px;
  }
  .prettyinput:focus {
      border-color: transparent;
      background: linear-gradient(#ffffffaa, #ffffffaa) padding-box,
                  linear-gradient(120deg, #ffb3ff, #b3e5ff, #ffd6a5) border-box;
      /*box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
      box-shadow: 0 0 15px #ffb3ff88;
      border: 2px solid transparent !important;
  }

   /* Little browser support for this */
  .prettyinput option {
    font-size: 16px;
  }


  .prettybtn {
    /* Button becomes prettier upon hovering over */
    background: linear-gradient(#fffa, #fffa) padding-box, linear-gradient(120deg, #ffd9e8, #e1f4ff) border-box;
    border: solid 1px #f0eaeb !important;
    box-shadow: 0px 0px 0px 0px;
    transition: box-shadow 0.25s ease;
    padding: 6px 12px;
    height: 40px;
    border-radius:15px;
  }

  .prettybtn:focus,
  .prettybtn:hover{
    border: 1px solid transparent !important;
    background: linear-gradient(#fffa, #fffa) padding-box, linear-gradient(120deg, #ffb3ff, #b3e5ff, #ffd6a5) border-box;
    box-shadow: 0px 0px 5px pink;
  }




 .colortile{
   /* Other colors are added with JS */

   border: 1px solid #f2f2f2;
   border-radius: 7px;
   padding: 6px;
   width: auto;
   background-color: #e2e2ff;
   display: inline-block;
   margin-right: 5px;

 }




  .prettypageheader
  {
    position: sticky;
    z-index:1;
    top: 0px;
    background-color: #f6f6f6;
    box-shadow: 0px 0px 7px 0px #bdbdbd;
    height: 75px;
    width: 100%;
  }


  /* Pretty Bubble Buttons */
  .prettybubblebtn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;          /* full pill/bubble */
    border: 1px solid #b9dafd8c;
    background: linear-gradient(135deg, #f7f6ff, #e4f5ff);
    box-shadow: 0 2px 14px rgba(80, 64, 180, 0.25);
    cursor: pointer;
    text-decoration: none;
    text-align: center;

  }

  .prettybubblebtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 11px rgba(80, 64, 180, 0.35);
    background: linear-gradient(135deg, #fdfbff, #ece8ff);
  }

  .prettybubblebtn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(80, 64, 180, 0.25);
  }


 .prettybtndsbl { /* For Pretty Disabled Buttons */
   /* Button becomes prettier upon hovering over */
   background: linear-gradient(#fffa, #fffa) padding-box, linear-gradient(120deg, #ffd9e8, #e1f4ff) border-box;
   border: solid 1px #f0eaeb !important;
   box-shadow: 0px 0px 0px 0px;
 }


  /* Shimmer Button */
  .prettyshine {
    position: relative;
    overflow:hidden;
  }
  .prettyshine::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 80%;
      height: 100%;
      background: linear-gradient(
          120deg,
          transparent,
          rgba(255,255,255,0.7),
          transparent
      );
      animation: prettyshine 10s infinite;
  }
  @keyframes prettyshine {
      0% { left: -100%; }
      100% { left: 120%; }
  }
  /* Assure each shiny element shines at a different rate */
  .prettyshine:nth-of-type(1)::after { animation-delay: 4s; }
  .prettyshine:nth-of-type(2)::after { animation-delay: 7.8s; }
  .prettyshine:nth-of-type(3)::after { animation-delay: 3.7s; }
  .prettyshine:nth-of-type(4)::after { animation-delay: 2.6s; }
  .prettyshine:nth-of-type(5)::after { animation-delay: 3.4s; }


  .prettyline {
    border: 0;
    height: 4px;
    width: 100%;
    margin: 30px 0;
    border-radius: 4px;
    background: linear-gradient(120deg, #ffb3ff, #b3e5ff, #ffd6a5);
    box-shadow: 0 0 10px rgba(255, 179, 255, 0.25);
  }




    .prettyrightclickmenu
    {
      background: linear-gradient(93deg, #fff4f8, #ebf8ff);
    }

    .prettyrightclickmenu a
    {
        border-bottom: 1px solid #d0d0d047;
    }

    .prettyrightclickmenu a:hover
    {
      background-color: inherit;
      transform: translateX(2px);
    }



  /* Toggle container */
  .prettytoggle {
      width: 60px;
      height: 30px;
      background: linear-gradient(135deg, #ffd6ff, #d6f0ff);
      border-radius: 30px;
      position: relative;
      cursor: pointer;
      display: inline-block;
  }

  /* Toggle ball */
  .prettytoggleball {
      width: 26px;
      height: 26px;
      background: white;
      border-radius: 50%;
      position: relative;
      top: 1px;
      left: 2px;
      transition: .3s;
  }

  /* Ball moves when checkbox is checked */
  .prettytoggle input:checked + .prettytoggleball {
      left: 31px;
      background: linear-gradient(120deg, #ffb3ff, #b3e5ff);
  }


/* Overtides  Menu  1 */

.prettymenu {
     border-radius: 0px 19px 19px 0px !important;
     border: solid #d8d8ff 1px !important;
 }


 .prettymenu a:hover
 {
     background: linear-gradient(145deg, #faeeff, #e0f7ff) !important;
 }

.prettysubmenulinks
 {
    border-radius: 0px 19px 19px 0px !important;
    border: solid #d8d8ff 1px !important;
    overflow:hidden !important;
 }

 .prettymenusubmenutext:hover
 {
   background: linear-gradient(345deg, #faeeff, #e0f7ff)  !important;
 }



.prettytab {
  background:
  linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)) padding-box,
  linear-gradient(#ffffffaa, #ffffffaa) padding-box,
  linear-gradient(120deg, #ffb3ff, #b3e5ff) border-box;

}

.prettytab:hover{

    background:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)) padding-box,
    linear-gradient(#ffffffaa, #ffffffaa) padding-box,
    linear-gradient(120deg, #ffb3ff, #b3e5ff, #ffd6a5) border-box;
}




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

   .prettymenu {
        border-radius: 0px 0px 0px 0px !important;
    }


   .prettysubmenulinks
    {
       border-radius: 0px 0px 0px 0px !important;
    }
 }




.prettytableheader{
  background: linear-gradient(135deg, #fbf3ff, #f3fcff);
}




.prettyoptionsbutton
{
  background: linear-gradient(135deg, #ffd6ff, #d6f0ff);
}

.prettyoptionsbutton:hover
{
   background: linear-gradient(135deg, #ffc1ff, #c1e8ff);
   box-shadow: 0 0 3px 1px #ffdeef;
   border: solid #d2d2d2 2px;
   font-weight: 800 !important;
}


.prettyoptionsbutton:hover svg
{ /* make the svg larger slightly as the increased border upon hovering makes it slightly smaller - this fixes that */
  transform: scale(1.08);
  transition: transform 0.15s ease;
 }

.prettyoptionsmenu
{
  background: linear-gradient(113deg, #fff4f8, #ebf8ff);
}

.prettyoptionsmenu a {
  border-bottom: 1px solid #d0d0d047;
}


.prettyoptionsmenu a:hover{
/*  transform: translateX(2px);*/

  background-color: inherit;
  transform: translateX(2px);


}




.prettyboxlist
{
 position:relative; /* Required for placing an Option Button within */
 --angle: 48deg;
 background: linear-gradient(var(--angle), #ffebf3, #eef9ff);
 box-shadow: 0 2px 8px 0px rgba(0,0,0,0.15) !important;
 transition: --angle 1.5s ease, box-shadow 1s ease;

 margin-top:15px;
 min-height: 60px;

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

 border-radius: 10px;
 border: solid #ece8e8 1px;

  transition: transform 0.2s ease, box-shadow 0.2s ease; /* makes hovering more graceful*/


}

.prettyboxlist:hover {
 transform: translateY(-2px);
 box-shadow: 0px 4px 15px 0px #d4e2ea !important; /* slightly blue glow */
}



.prettydetails
{

 position:relative; /* Required for placing an Option Button within */
 --angle: 15deg;

 background: linear-gradient(var(--angle), #ffebf3, #eef9ff);
 /*background: linear-gradient( to bottom, #ffebf3 0%, #ffebf3 21%, #fff 42%, #fff 100% );*/
 background-size: 100% 200px; /* pretend the gradient is 200px tall */
 background-repeat: no-repeat;
 box-shadow: 0 2px 8px 0px rgba(0,0,0,0.15) !important;
 transition: --angle 1.5s ease, box-shadow 1s ease;
 margin-top:15px;
 min-height: 60px;
 padding-right: 30px;
 padding-left: 30px;
 padding-top:15px;
 padding-bottom:15px;
 border-radius: 10px;
 border: solid #ece8e8 1px;
 transition: transform 0.2s ease, box-shadow 0.2s ease; /* makes hovering more graceful*/


}

.prettydetails[open]
{
background: linear-gradient( to bottom, #ffebf3 0%, #ffebf3 0%, #fff 12%, #fff 100% );
}




/* ----- File Uploader ------  */


 .prettydragdroparea {
     border: 3px dashed #b2ccea;
     padding: 30px;
     border-radius: 12px;
     background: #f9fbfd;
     cursor: pointer;
     transition: 0.3s;
     min-height: 120px; /* keeps it stable */
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     overflow: hidden; /* prevents text overflow */
 }

 .prettydragdroparea.dragover {
     background: #e3f2ff;
     border-color: #4a90e2;
     color: #357ABD;
 }


.prettyuploadfileinput {
    display: none;
}





.prettyuploadfilebtn {
    margin-top: 20px;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;

    background: #4998E5;
    color:white;


    /*background: linear-gradient(161deg, #fdf1f5, #edf9ff) border-box;*/
    border: solid 1px #e6e6fb !important;
    box-shadow: 0px 0px 0px 0px;
    transition: box-shadow 0.25s ease;
}

.prettyuploadfilebtn:hover,
.prettyuploadfilebtn:focus {
  background: #5D9FDF;
    border: 1px solid transparent !important;
    /*background: linear-gradient(#fffa, #fffa) padding-box, linear-gradient(120deg, #ffb3ff, #b3e5ff, #ffd6a5) border-box;
    box-shadow: 0px 0px 5px pink;
    */
}


  /* ------------------------------------------------ */
  /* ------------------------------------------------ */