@import url(https://fonts.googleapis.com/earlyaccess/amiri.css);
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(https://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
/* @import url(https://fonts.googleapis.com/earlyaccess/lateef.css);
@import url(https://fonts.googleapis.com/earlyaccess/scheherazade.css);
@import url(https://fonts.googleapis.com/earlyaccess/thabit.css);
@import url(https://fonts.googleapis.com/earlyaccess/thabit.css);
@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600); */

.rtl{direction: rtl;}
.ltr{direction: ltr;}

.center{text-align: center !important;}
.right{text-align: right !important;}
.left{text-align: left !important;}

.capitalize{text-transform: capitalize;}
.uppercase{text-transform: uppercase;}

.amiri{font-family: 'Amiri', serif !important;}
.kufi{font-family: 'Droid Arabic Kufi', serif !important;}
.naskh{font-family: 'Droid Arabic Naskh', serif !important;}
.lateef{font-family: 'Lateef', serif !important;}
.scheherazade{font-family: 'Scheherazade', serif !important;}
.thabit{font-family: 'Thabit', serif !important;}
.arabicFont{ font-family: "Lemonada", sans-serif  !important;}

.blink_me {
  animation: blinker 1s infinite;
}

@keyframes blinker {
  50% {
    color: red;
  }
}


.blink_me2 {
    background: cyan;
  animation: blinker2 1s infinite;
}

@keyframes blinker2 {
  50% {
    opacity: 0.7;
  }
}

.blink_me3 {
  color: red;
  background: rgb(240, 240, 240);
  animation: blinker3 1s infinite;
}

@keyframes blinker3 {
50% {
  opacity: 0.7; background: red; color: white;
}
}


.blink_me4 {
  background: rgb(240, 240, 240);
  animation: blinker4 1s infinite;
}

@keyframes blinker4 {
50% {
  opacity: 0.7; background: rgb(183, 255, 0); color: white;
}
}



/* colorssssssss */
.red{color: red;}
.darkred{color: rgb(171, 0, 0);}
.cyan{color: cyan;}
.darkcyan{color: #03AED2;}
.green{color: rgb(0, 163, 0);}
.blue{color: blue;}
.blue2{color: #3572EF;}
.darkblue{color: darkblue;}
.darkblue2{color: #00374e;}
.lightblue{color: #A0DEFF;}
.yellow{color: yellow;}
.grey{color: grey;}
.black{color: black;}
.white{color: white !important;}
.purple{color: purple;}
.violet{color: violet !important;}
.orange{color: orange;}
.orangered{color: orangered;}
.yellowgreen{color: yellowgreen;}


/* bgsssssssss */
.bgnone{background: none;}
.bgred{background-color: red !important;}
.bglightred{background-color: #ead4ff;}
.bgblueIlluminated{background: blue !important;}
.bgcyan{background-color: cyan;}
.bgcyan2{background-color: rgb(2, 214, 143);}
.bggreen{background-color: rgb(0, 156, 0);}
.bggreen2{background-color: rgb(0, 210, 0);}
.bglightgreen{background-color: rgb(192, 255, 192);}
.bgblue{background-color: blue;}
.bgblue2{background-color: #3572EF;}
.bgblue3{background-color: #96C9F4;}
.bgblue4{background-color: #039fbe;}
.bgskyblue{background-color: skyblue !important;}
.bgdarkblue{background-color: darkblue;}
.bgdarkblue2{background-color: #00374e;}
.bgdarkblue3{background-color: #00507f;}
.bgdarkBlueTW {background: rgb(43, 15, 144); background: linear-gradient(90deg, rgb(37, 12, 130) 0%, rgb(24, 0, 109) 50%, rgba(0, 10, 69, 1) 100%);}
.bgpurpleTW {background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(151,41,247,1) 0%, rgba(24,22,39,1) 90% );}
.bgyellow{background-color: yellow;}
.bggrey{background-color: grey !important;}
.bggrey2{background-color: rgb(235, 235, 235) !important;}
.bggrey3{background-color: rgb(245, 245, 245) !important;}
.bglightblue{background-color: #A0DEFF;}
.bglightblue2{background-color: rgb(242, 253, 255);}
.bglightblue3{background-color: #3ABEF9;}
.bglightblue4{background-color: #5BBCFF;}
.bglightblue5{background-color: rgb(14 165 233);}
.bglightblue6{background-color: rgb(56 189 248);}
.bglightblueTW{background-color: rgb(226 232 240);}
.bglightblueTW2{background-color: rgb(96 165 250);}
.bglightbluenew{background: #92bde7;}
.bgblack{background-color: black;}
.bgwhite{background-color: white;}
.bgwhitesmoke{background-color: whitesmoke;}
.bgpurple{background-color: rgb(55, 0, 55) !important;}
.bgviolet{background-color: violet !important;}
.bgviolet2{background-color: rgb(255, 233, 255) !important;}
.bgorange{background-color: orange;}
.bgorangered{background-color: orangered !important;}
.bgyellowgreen{background-color: yellowgreen;}
.bgyellowgreen2{background-color: rgb(181, 242, 59);}
.bgblue25{background-color: rgba(74, 222, 255, 0.20);}
.bgskyblue2{background-color: rgba(135, 207, 235);}

.bggreyInput{background-color: rgb(245, 245, 245);}
.bggreyInput:hover{background-color: rgb(235, 235, 235);}
.bggreyInput:active{background-color: rgb(235, 235, 235);}


.gradientLightblueYellow{background-image: linear-gradient( 109.6deg,  rgba(254,253,205,1) 11.2%, rgba(163,230,255,1) 91.1% );}
.gradientLightblueYellow2{background-image: linear-gradient( 174.2deg,  rgba(255,244,228,1) 7.1%, rgba(240,246,238,1) 67.4% );}
.gradientLightblue{background-image: linear-gradient( 89.5deg,  rgba(131,204,255,1) 0.4%, rgba(66,144,251,1) 100.3% );}
.gradientLightblue2{background-image: linear-gradient( 180.7deg,  rgba(0,213,255,0.85) 2.5%, rgba(79,255,255,0.75) 97.7% );}
.gradientBlue{background-image: linear-gradient( 93.2deg,  rgba(24,95,246,1) 14.4%, rgba(27,69,166,1) 90.8% );}
.gradientDarkBlue1{background-image: linear-gradient( 288deg,  rgba(0,85,255,1) 1.5%, rgba(4,56,115,1) 91.6% );}
.gradientDarkBlue2{background-image: radial-gradient( circle 975px at 2.6% 48.3%,  rgba(0,8,120,1) 0%, rgba(95,184,224,1) 99.7% );}
.gradientDarkBlue3{background-image: linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgba(27,24,113,1) 93.2% );}


.hovercyan:hover{color: cyan;}
.hovercyan2:hover{color: rgb(90, 255, 255);}
.hoverlightblue:hover{color: #A0DEFF}
.hoverdarkblue:hover{color: darkblue;}
.hoverwhite:hover{color: white;}

.hoverbgskyblue:hover{background-color: skyblue}
.hoverbgcyan:hover{background-color: cyan; transition-duration: 0.75s;}
.hoverbgcyan2:hover{background-color: rgb(90, 255, 255); transition-duration: 0.75s;}
.hoverbglightblue:hover{background-color: rgb(229, 250, 252); transition-duration: 0.75s;}
.hoverbggradientLightblueYellow:hover{background-image: linear-gradient( 109.6deg,  rgba(254,253,205,1) 11.2%, rgba(163,230,255,1) 91.1% );}
.hovershadowcyan5:hover{box-shadow: 5px 5px 5px #41C9E2; transition-duration: 0.75s;}
.hovershadowcyan10:hover{box-shadow: 10px 10px 10px #41C9E2; transition-duration: 0.75s;}
.hoverbgdarkblue:hover{background-color: darkblue}
.hoverbgdarkblue2:hover{background-color: rgb(1, 69, 82);}
.hoverbgyellowgreen:hover{background-color: rgb(154, 255, 144);}


.transitionAll{ transition: all 0.6s ease;}

/* fontsssssss */
.font10{font-size: 10px;}
.font12{font-size: 12px;}
.font14{font-size: 14px;}
.font16{font-size: 16px;}
.font18{font-size: 18px;}
.font20{font-size: 20px;}
.font22{font-size: 22px;}
.font24{font-size: 24px;}
.font26{font-size: 26px;}
.font28{font-size: 28px;}
.font30{font-size: 30px;}
.font36{font-size: 36px;}
.font48{font-size: 48px;}
.font72{font-size: 72px;}


.fontremh{font-size: 0.5rem;}
.fontrem1{font-size: 1rem;}
.fontrem1h{font-size: 1.5rem;}
.fontrem2{font-size: 2rem;}
.fontrem2h{font-size: 2.5rem;}
.fontrem3{font-size: 3rem;}
.fontrem3h{font-size: 3.5rem;}
.fontrem4{font-size: 4rem;}

.bold{font-weight: bold;}
.bolder{font-weight: bolder;}

.italic{font-style: italic;}

.underline{text-decoration: underline;}
.underlineNo{text-decoration: none;}


/* borderssssss */
.bordernone{border: none;}
.borderred{border: 1px solid red;}
.borderredInput{border: 1px solid red; outline: 1px solid red;}
.bordercyan{border: 1px solid cyan;}
.bordergreen{border: 1px solid green;}
.borderblue{border: 1px solid blue;}
.borderdarkblue{border: 1px solid rgb(1, 87, 130);}
.borderyellow{border: 1px solid yellow;}
.bordergrey{border: 1px solid grey;}
.bordergrey2{border: 1px solid rgb(189, 188, 188);}
.borderblack{border: 1px solid black;}
.borderwhite{border: 1px solid white;}
.borderlightblue{border: 1px solid rgb(96 165 250);}

.borderrightpurple{border-right: 10px solid rgb(151, 101, 184); border-left: none;}
.borderrightblue{border-right: 10px solid rgb(6, 166, 224); border-left: none;}
.borderrightgreen{border-right: 10px solid rgb(6, 224, 169); border-left: none;}
.borderrightred{border-right: 10px solid rgb(157, 0, 0); border-left: none;}

.border2px{border-width: 2px;}
.border3px{border-width: 3px;}
.border4px{border-width: 4px;}
.border5px{border-width: 5px;}
.border10px{border-width: 10px;}
.border15px{border-width: 15px;}
.border20px{border-width: 20px;}
.borderphone{border-top: 40px solid black; border-bottom: 50px solid black;}

.borderRD{border-width: 0 5px 5px 0;}
.borderLD{border-width: 0 0 5px 5px;}
.borderPageTitle{border: 1px solid #03AED2; border-width: 0 5px 5px 0;}

.solid{border-style: solid;}
.dashed{border-style: dashed;}
.double{border-style: double;}


/* tablesssssss */
.table{border-collapse: collapse;}
.table-bordered th{border: 1px solid white;}
.table-bordered td{border: 1px solid grey;}
.table-padding th,td{padding-right: 3px; padding-left: 3px;}
.table-striped tr{background-color: #e2faff;}
.table-striped th{background-color:rgb(0, 112, 135); color: white;}
.table-striped tr:nth-of-type(even){background-color: white;}
.table-hover tr:hover{background-color: rgb(2, 214, 143) !important;}
.table-striped2 tr:nth-of-type(even){background-color: rgb(243, 243, 243);}


.table-red{border-collapse: collapse; border: 1px solid grey; }
.table-red th{background-color: red; color: white; border:1px solid white;}
.table-red td{background-color: white; color: darkred;}
.table-red tr:nth-of-type(even) td{background-color: rgb(249, 205, 255); color: darkred;}
.table-red tr:hover td{background-color: rgb(251, 254, 48); color: black;}


.table-blue{border-collapse: collapse; border: 1px solid grey; }
.table-blue th{background-color: #3572EF; color: white; border:1px solid white;}
.table-blue td{background-color: white; color: darkblue;}
.table-blue tr:nth-of-type(even) td{background-color: rgb(205, 221, 255); color: darkblue;}
.table-blue tr:hover td{background-color: cyan; color: black;}



.table-green{border-collapse: collapse; border: 1px solid grey; }
.table-green th{background-color: #16da09; color: white; border:1px solid white;}
.table-green td{background-color: white; color: rgb(1, 131, 70);}
.table-green tr:nth-of-type(even) td{background-color: rgb(205, 255, 213); color: darkblue;}
.table-green tr:hover td{background-color: rgb(106, 254, 48); color: black;}

.tdForTriangle{border: none !important; background: #eee; padding: 0 !important; }

.table-calendar{border: 1px solid grey; background-color: rgb(0, 108, 161);}
.table-calendar th{background-color: #00507f; color: white; border:1px solid white;}
.table-calendar td{background-color: white; color: #00507f; padding: 0; border-radius: 15px;}
/* .table-calendar tr td:nth-of-type(even){background-color: rgb(234, 246, 253); color: #00507f;} */
.table-calendar tr td:hover{background-color: rgb(192, 243, 255); color: #00507f;}
.table-calendar tr td .pointer:nth-of-type(even){background-color: rgb(188, 248, 254); color: #00507f;}
.table-calendar tr td .pointer:hover{background-color: rgb(149, 254, 170); color: #00507f;}

.table-comments{border-collapse: collapse; border: 1px solid grey;}
.table-comments th{background-color: #00507f; color: white; border:1px solid white;}
.table-comments td{background-color: white; color: #00507f;}
.table-comments tr:nth-of-type(even) td{background-color: rgb(227, 250, 254); color: #00507f;}
.table-comments tr:hover td{background-color: rgb(159, 237, 254); color: #00507f;}
.commentTd{width: 75%;}

.tableFixHead          {overflow-x: hidden; overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

.table-font12 th,td{font-size: 12px;}
.table-font14 th,td{font-size: 14px;}
.table-font16 th,td{font-size: 16px;}

.table-calendar-new{border: 1px solid grey; width: 100%; border-collapse: collapse;}
.table-calendar-new tr td{font-size: 14px; line-height: 16px; text-align: center; color: #005183; border: 1px solid #636363; padding: 3px; height: 40px; border-radius: 15px;}
.table-calendar-new tr th{font-size: 14px; color: #ffffff; border: 1px solid #636363; padding: 0; background-color: #00507f; border-color: #b0afaf; text-align: center;}
.table-calendar-new tr:nth-of-type(even) td{background-color: #ecf6f9;}
.table-calendar-new tr:hover td{background-color: #d1f0f9;}


.table-blue-clinical{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-blue-clinical tr td{font-size: 14px;  text-align: center; color: #005183; border: 1px solid #636363; padding: 0; height: 40px;}
.table-blue-clinical tr th{font-size: 14px; color: #003b5f; border: 1px solid #636363; padding-left: 10px; height: 40px;  background-color: rgb(164, 227, 252); border-color: #b0afaf; text-align: center;}
.table-blue-clinical tr:nth-of-type(even) td{background-color: #ecf6f9;}
.table-blue-clinical tr:hover td{background-color: #eafbff;}



.table-blue-new{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-blue-new tr td{font-size: 14px; line-height: 16px; text-align: center; color: #005183; border: 1px solid #636363; padding: 3px; height: 40px;}
.table-blue-new tr th{font-size: 14px; color: #005183; border: 1px solid #636363; padding: 10px; background-color: skyblue; border-color: #b0afaf; text-align: center;}
.table-blue-new tr:nth-of-type(even) td{background-color: #ecf6f9;}
.table-blue-new tr:hover td{background-color: #d1f0f9;}

.table-blue-new-medium{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-blue-new-medium tr td{font-size: 14px; line-height: 16px; text-align: center; color: #005183; border: 1px solid #636363; padding: 2px; height: 30px;}
.table-blue-new-medium tr th{font-size: 14px; color: #005183; border: 1px solid #636363; padding: 3px; height: 40px; background-color: skyblue; border-color: #b0afaf; text-align: center;}
.table-blue-new-medium tr:nth-of-type(even) td{background-color: #ecf6f9;}
.table-blue-new-medium tr:hover td{background-color: #d1f0f9;}


.table-green-new-medium{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-green-new-medium tr td{font-size: 12px; line-height: 14px; text-align: center; color: #00714f; border: 1px solid #038b63; padding: 2px; height: 30px;}
.table-green-new-medium tr th{font-size: 12px; color: #00714f; border: 1px solid #038b63; padding: 3px; height: 40px; background-color: #87ebd2; border-color: #cfffe2; text-align: center;}
.table-green-new-medium tr:nth-of-type(even) td{color: #00714f; background-color: #ecf9f0;}
.table-green-new-medium tr:hover td{background-color: #d1f9e2;}

.table-green-new-small{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-green-new-small tr td{font-size: 12px; line-height: 14px; text-align: center; color: #00714f; border: 1px solid #038b63; padding: 1px;}
.table-green-new-small tr th{font-size: 12px; color: #00714f; border: 1px solid #038b63; padding: 1px; background-color: #87ebd2; border-color: #cfffe2; text-align: center;}
.table-green-new-small tr:nth-of-type(even) td{color: #00714f; background-color: #ecf9f0;}
.table-green-new-small tr:hover td{background-color: #d1f9e2;}


.table-green-new{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-green-new tr td{font-size: 14px; line-height: 16px; text-align: center; color: #00714f; border: 1px solid #038b63; padding: 3px; height: 40px;}
.table-green-new tr th{font-size: 14px; color: #00714f; border: 1px solid #038b63; padding: 10px; background-color: #87ebd2; border-color: #cfffe2; text-align: center;}
.table-green-new tr:nth-of-type(even) td{color: #00714f; background-color: #ecf9f0;}
.table-green-new tr:hover td{background-color: #d1f9e2;}


.table-green-new2{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-green-new2 tr td{font-size: 14px; line-height: 16px; text-align: center; color: #00714f; border: 1px solid #038b63; padding: 3px; height: 40px;}
.table-green-new2 tr th{font-size: 14px; color: #00714f; border: 1px solid #038b63; padding: 10px; background-color: #87ebd2; border-color: #cfffe2; text-align: center;}
.table-green-new2 tr:hover td{background-color: #d1f9ff;}



.table-red-new{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-red-new tr td{font-size: 14px; line-height: 16px; text-align: center; color: #71000f; border: 1px solid #8b0303; padding: 3px; height: 40px;}
.table-red-new tr th{font-size: 14px; color: #71000f; border: 1px solid #8b0303; padding: 10px; background-color: #ffa5a5; border-color: #ffc3c3; text-align: center;}
.table-red-new tr:nth-of-type(even) td{color: #710000; background-color: #f9ecec;}
.table-red-new tr:hover td{background-color: #f9d1d1;}

.table-red-new-medium{width: 100%; border-collapse: collapse; table-layout: auto;}
.table-red-new-medium tr td{font-size: 14px; line-height: 16px; text-align: center; color: #71000f; border: 1px solid #8b0303; padding: 2px; height: 30px;}
.table-red-new-medium tr th{font-size: 14px; color: #71000f; border: 1px solid #8b0303; padding: 3px; height: 40px; background-color: #ffa5a5; border-color: #ffc3c3; text-align: center;}
.table-red-new-medium tr:nth-of-type(even) td{color: #710000; background-color: #f9ecec;}
.table-red-new-medium tr:hover td{background-color: #f9d1d1;}



.stripedgrey{background-color: #e1e1e1;}
.stripedgrey:nth-of-type(even){background-color: #f2f2f2;}


/* radiusssss */
.radius5{border-radius: 5px;}
.radius10{border-radius: 10px;}
.radius15{border-radius: 15px;}
.radiusL10{border-radius: 10px 0 0 10px;}
.radiusL15{border-radius: 15px 0 0 15px;}
.radiusU10{border-radius: 10px 10px 0 0;}
.radiusU15{border-radius: 15px 15px 0 0;}


.radius25percent{border-radius: 25%;}
.radius50percent{border-radius: 50%;}
.radiusNav{border-radius: 50px 0 50px 0;}
.radiusNavReverse{border-radius: 0 50px 0 50px;}
.radiusLotus{border-radius: 300px 0 300px 0;}
.radiusLotusReverse{border-radius: 0 300px 0 300px;}
.radiusLotus2{border-radius: 500px 0 500px 0;}
.radiusLotusReverse2{border-radius: 0 500px 0 500px;}


/* displaysssssssss */
.hide{display: none;}
.block{display: block;}
.inlineblock{display: inline-block;}
.myflex{display: flex;}

.flexrowStart {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.flexrowStart2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.flexcolStart {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flexcolStart2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.flexcolEnd {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.flexrowStartAll {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.flexcolStartAll {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.flexcolOnMobile{
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.row{flex-direction: row;}
.col{flex-direction: column;}
.column{flex-direction: column;}

.flexrow{display: flex; flex-direction: row; align-items: center; justify-content: center;}
.flexcol{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.grow0{flex-grow: 0;}
.grow1{flex-grow: 1;}
.wrap{flex-wrap: wrap;}
.nowrap{flex-wrap: nowrap;}
.spaceBetween{justify-content: space-between;}
.spaceAround{justify-content: space-around;}

.selfstart{align-self: flex-start;}
.selfend{align-self: flex-end;}

.selfstartJustify{justify-self: flex-start;}
.selfendJustify{justify-self: flex-end;}

.aligncenter{align-items: center;}
.alignflexstart{align-items: flex-start;}
.alignflexend{align-items: flex-end;}

.justifycenter{justify-content: center;}
.justifyflexstart{justify-content: flex-start;}
.justifyflexend{justify-content: flex-end;}

/* positionsssssssss */
.fixed{position: fixed; top: 0;}
.fixedTop50{position: fixed; top: 50px;}
.stickyTop{position: -webkit-sticky; position: sticky; top: 0;}
.stickyTop50{position: -webkit-sticky; position: sticky; top: 50px;}
.absolute{position: absolute;}
.relative{position: relative;}
.absoluteTopLeft{position: absolute; top: 0; left: 0;}
.fixedTopLeft{position: fixed; top: 10px; left: 10px;}
.fixedTopLeft50{position: fixed; top: 50px; left: 5px;}
.absoluteTopright{position: absolute; top: 0; right: 0;}
.fixedTopright50{position: fixed; top: 50px; right: 5px;}
.absoluteBottom0Right0{position: absolute; bottom: 0; right: 0;}
.absoluteBottom30Right0{position: absolute; bottom: 30px; right: 0;}
.fixedMiddle{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* paddingsssssssss */
.paddingAuto{padding: auto;}
.padding0{padding: 0;}
.padding2{padding: 2px;}
.padding5{padding: 5px;}
.padding10{padding: 10px;}
.padding15{padding: 15px;}
.padding20{padding: 20px;}
.padding30{padding: 30px;}
.padding40{padding: 40px;}
.padding50{padding: 50px;}

.paddingRL5{padding-right: 5px; padding-left: 5px;}
.paddingRL10{padding-right: 10px; padding-left: 10px;}
.paddingRL20{padding-right: 20px; padding-left: 20px;}
.paddingRL30{padding-right: 30px; padding-left: 30px;}
.paddingright10{padding-right: 10px;}
.paddingright20{padding-right: 20px;}
.paddingright30{padding-right: 30px;}
.paddingleft30{padding-left: 30px;}
.paddingleft40{padding-left: 40px;}
.paddingRL40{padding-right: 40px; padding-left: 40px;}
.paddingRL50{padding-right: 50px; padding-left: 50px;}

.paddingUD5{padding-right: 5px; padding-left: 5px;}
.paddingUD10{padding-right: 10px; padding-left: 10px;}
.paddingUD20{padding-right: 20px; padding-left: 20px;}
.paddingUD30{padding-right: 30px; padding-left: 30px;}
.paddingUD40{padding-right: 40px; padding-left: 40px;}
.paddingUD50{padding-right: 50px; padding-left: 50px;}

.paddingTop5{padding-top: 5px;}
.paddingTop10{padding-top: 10px;}
.paddingTop15{padding-top: 15px;}
.paddingTop20{padding-top: 20px;}
.paddingTop25{padding-top: 25px;}
.paddingTop30{padding-top: 30px;}

.paddingBottom5{padding-bottom: 5px;}

/* marginssssssss */
.marginAuto{margin: auto;}
.margin1{margin: 1px;}
.margin2{margin: 2px;}
.margin3{margin: 3px;}
.margin4{margin: 4px;}
.margin5{margin: 5px;}
.margin10{margin: 10px;}
.margin15{margin: 15px;}
.margin20{margin: 20px;}
.margin25{margin: 25px;}
.margin30{margin: 30px;}

.margintop1{margin-top: 1px;}
.margintop2{margin-top: 2px;}
.margintop3{margin-top: 3px;}
.margintop4{margin-top: 4px;}
.margintop5{margin-top: 5px;}
.margintop10{margin-top: 10px;}
.margintop15{margin-top: 15px;}
.margintop20{margin-top: 20px;}
.margintop25{margin-top: 25px;}
.margintop30{margin-top: 30px;}
.margintop40{margin-top: 40px;}
.margintop50{margin-top: 50px;}
.margintop60{margin-top: 60px;}
.margintop70{margin-top: 70px;}

.marginbottom1{margin-bottom: 1px;}
.marginbottom2{margin-bottom: 2px;}
.marginbottom3{margin-bottom: 3px;}
.marginbottom4{margin-bottom: 4px;}
.marginbottom5{margin-bottom: 5px;}
.marginbottom10{margin-bottom: 10px;}
.marginbottom15{margin-bottom: 15px;}
.marginbottom20{margin-bottom: 20px;}
.marginbottom25{margin-bottom: 25px;}
.marginbottom30{margin-bottom: 30px;}
.marginbottom40{margin-bottom: 40px;}
.marginbottom50{margin-bottom: 50px;}
.marginbottom60{margin-bottom: 60px;}
.marginbottom70{margin-bottom: 70px;}

.marginright1{margin-right: 1px;}
.marginright2{margin-right: 2px;}
.marginright3{margin-right: 3px;}
.marginright4{margin-right: 4px;}
.marginright5{margin-right: 5px;}
.marginright10{margin-right: 10px;}
.marginright15{margin-right: 15px;}
.marginright20{margin-right: 20px;}
.marginright25{margin-right: 25px;}
.marginright30{margin-right: 30px;}
.marginright40{margin-right: 40px;}
.marginright50{margin-right: 50px;}
.marginright60{margin-right: 60px;}
.marginright70{margin-right: 70px;}

.marginleft1{margin-left: 1px;}
.marginleft2{margin-left: 2px;}
.marginleft3{margin-left: 3px;}
.marginleft4{margin-left: 4px;}
.marginleft5{margin-left: 5px;}
.marginleft10{margin-left: 10px;}
.marginleft15{margin-left: 15px;}
.marginleft20{margin-left: 20px;}
.marginleft25{margin-left: 25px;}
.marginleft30{margin-left: 30px;}
.marginleft40{margin-left: 40px;}
.marginleft50{margin-left: 50px;}
.marginleft60{margin-left: 60px;}
.marginleft70{margin-left: 70px;}

.marginBottom50{margin-bottom: 50px;}
.marginRL5{margin-right: 5px; margin-left: 5px;}
.marginRL10{margin-right: 10px; margin-left: 10px;}
.marginRL20{margin-right: 20px; margin-left: 20px;}

.marginUD5{margin-top: 5px; margin-bottom: 5px;}
.marginUD10{margin-top: 10px; margin-bottom: 10px;}
.marginUD20{margin-top: 20px; margin-bottom: 20px;}


/* widthssssssss */
.w5px{width: 5px;}
.w10px{width: 10px;}
.w20px{width: 20px;}
.w25px{width: 25px;}
.w30px{width: 30px;}
.w40px{width: 40px;}
.w50px{width: 50px;}
.w60px{width: 60px;}
.w70px{width: 70px;}
.w80px{width: 80px;}
.w90px{width: 90px;}
.w100px{width: 100px;}
.w150px{width: 150px;}
.w200px{width: 200px;}
.w250px{width: 250px;}
.w300px{width: 300px !important;}
.w350px{width: 350px !important; min-width: 350px !important;}
.w400px{width: 400px;}
.w500px{width: 500px;}
.w600px{width: 600px;}
.w700px{width: 700px;}
.w800px{width: 800px;}
.w900px{width: 900px;}
.w1000px{width: 1000px;}

.w25{width: 25%;}
.w33{width: 33.3%;}
.w45{width: 45%;}
.w50{width: 50%;}
.w66{width: 66.6%;}
.w75{width: 75%;}
.w90{width: 90%;}
.w95{width: 95%;}
.w100{width: 100%;}

.w50pxMin{min-width: 50px;}
.w70pxMin{min-width: 70px;}
.w100pxMin{min-width: 100px;}
.w125pxMin{min-width: 125px;}
.w150pxMin{min-width: 150px;}
.w200pxMin{min-width: 200px;}
.w250pxMin{min-width: 250px;}
.w300pxMin{min-width: 300px;}
.w350pxMin{min-width: 350px;}
.w400pxMin{min-width: 400px;}
.w450pxMin{min-width: 450px;}
.w500pxMin{min-width: 500px;}

.w400pxMax{max-width: 400px;}
.w500pxMax{max-width: 500px;}
.w700pxMax{max-width: 700px;}
.w950pxMax{max-width: 950px;}

.w50-100{
    width: 50%;
}


/* heightsssssssss */
.h0{height: 0;}
.h0Max{max-height: 0; overflow: hidden;}
.h10px{height: 10px;}
.h15px{height: 15px;}
.h20px{height: 20px;}
.h25px{height: 25px;}
.h30px{height: 30px;}
.h40px{height: 40px;}
.h50px{height: 50px;}
.h60px{height: 60px;}
.h70px{height: 70px;}
.h80px{height: 80px;}
.h90px{height: 90px;}
.h100px{height: 100px;}
.h150px{height: 150px;}
.h200px{height: 200px;}
.h250px{height: 250px;}
.h300px{height: 300px;}
.h350px{height: 350px;}
.h400px{height: 400px;}
.h450px{height: 450px;}
.h500px{height: 500px;}
.h550px{height: 550px;}
.h600px{height: 600px;}
.h700px{height: 700px;}
.h40min{min-height: 40px;}
.h50min{min-height: 50px;}
.h70min{min-height: 70px;}
.h100min{min-height: 100px;}
.h200min{min-height: 200px;}
.h250pxmin{min-height: 250px;}
.h300min{min-height: 300px;}
.h350min{min-height: 350px;}
.h400min{min-height: 400px;}
.h500min{min-height: 500px;}
.h700min{min-height: 700px;}
.h750min{min-height: 750px;}
.h25{height: 25%;}
.h33{height: 33.3%;}
.h50{height: 50%;}
.h66{height: 66.6%;}
.h75{height: 75%;}
.h90{height: 90%;}
.h100{height: 100%;}

.h90Max{max-height: 90%;}

.h70vh{height: 70vh;}
.h75vh{height: 75vh;}
.h80vh{height: 80vh;}
.h90vh{height: 90vh;}
.h100vh{height: 100vh;}
.h70vhMin{min-height: 70vh;}
.h80vhMin{min-height: 80vh;}
.h90vhMin{min-height: 90vh;}
.h100vhMin{min-height: 100vh;}
.h70vhMax{max-height: 70vh;}
.h75vhMax{max-height: 75vh;}
.h80vhMax{max-height: 80vh;}
.h90vhMax{max-height: 90vh;}
.h100vhMax{max-height: 100vh;}
.hcalc{height: calc(100vh - 225px);}


/* shadowssssssss */
.shadow2{box-shadow: 2px 2px 2px 2px grey;}
.shadow3{box-shadow: 3px 3px 3px 3px grey;}
.shadow5{box-shadow: 5px 5px 5px 5px grey;}
.shadow10{box-shadow: 10px 10px 10px 10px grey;}
.shadow15{box-shadow: 15px 15px 15px 15px grey;}
.shadowTW{box-shadow: 0 7px 10px -1px #334155, 0 2px 4px -2px #334155;}
.shadowWhite{box-shadow: 5px 5px 5px 5px white;}
.shadowLightBlue{box-shadow: 3px 3px 3px rgb(150, 234, 255);}
.shadowTWLightBlue{box-shadow: 3px 3px 3px rgb(96 165 250);}


.shadowInset{box-shadow: 5px 5px 10px 1px #000000 inset;}
.shadowInset2{box-shadow: 5px 5px 10px 1px #000000 inset, 5px 5px 10px 1px #000000;}


.floatright{float: right;}
.floatleft{float: left;}

.pointer{cursor: pointer;}

.overflowAuto{overflow: auto;}
.overflowScroll{overflow: scroll;}
.overflowHidden{overflow: hidden;}
.overflowAutoX{overflow-x: auto;}
.overflowHiddenX{overflow-x: hidden;}
.overflowAutoY{overflow-y: auto;}
.overflowHiddenY{overflow-y: hidden;}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    min-width: 350px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal.open {
    display: block;
}
/* Ensure proper stacking context */
.modal-overlay {
    z-index: 1000;
  }


  .dropdown-menu {
    z-index: 999;
  }
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    min-width: 350px;
    width: 50%;
    border-radius: 8px;
    z-index: 1001;
}

/* Add to your stylesheet */
.dropdown-close-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px;
    color: #9CA3AF;
    transition: color 0.2s;
}

.dropdown-close-btn:hover {
    color: #4B5563;
}

.dropdown-close-btn svg {
    display: block;
    width: 12px;
    height: 12px;
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: black;
}


.opacity25{opacity: 0.25;}
.opacity50{opacity: 0.5;}
.opacity75{opacity: 0.75;}
.opacity100{opacity: 1;}

@-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
      top: 100px;
      transform:scale(0)
   }
    75% {
      opacity: 0.5;
      top: 0px;
   }
    100% {
      opacity: 1;
      transform:scale(1)
   }
  }

  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
      transform:scale(1)
   }
    75% {
      opacity: 0.5;
      top: 0px;
   }
    100% {
      opacity: 0;
      transform:scale(0)
   }
  }


/* scrollbarssssssssss */
::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #00a9cf;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #00a9cf;
  }


@media screen and (min-width: 600px) {
    ::-webkit-scrollbar { width: 5px;}
    }


    .accordion {
      background-color: #5ae3ff !important;
      color: #444;
      cursor: pointer;
      border: none;
      text-align: right;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }
    .accordion:nth-of-type(even){background-color: #d3f9ff;}
    .active, .accordion:hover {
      background-color: #eee;
    }

    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
    }

    .active:after {
      content: "\2212";
    }

    .panel {
      width: 100%;
      padding: 0 18px;
      max-height: 0;
      overflow: auto;
      transition: max-height 1s ease-out;
    }


/* trianglessssssssss */
.triangle1 {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgb(96, 0, 193); /* Change #ccc to your desired color */
}
.triangle2 {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgb(0, 0, 148); /* Change #ccc to your desired color */
}
.triangle3 {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgba(0,85,255,1); /* Change #ccc to your desired color */
}
.triangle4 {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgb(46, 234, 255); /* Change #ccc to your desired color */
}
.triangle5 {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #D5FFD0; /* Change #ccc to your desired color */
}


.purple1{
    color: white;
    background-image: linear-gradient( to left,  rgb(40, 0, 79) 11.2%, rgb(96, 0, 193) 91.1% );
}
.purple2{
    color: white;
    background-image: linear-gradient( to left,  rgb(4, 0, 121) 6.5%, rgb(0, 0, 148) 93.2% );
}
.purple3{
    color: white;
    background-image: linear-gradient( to left,  rgb(0, 71, 151) 1.5%, rgba(0,85,255,1) 91.6% );
}
.purple4{
    color: black;
    background-image: linear-gradient( to left,  rgb(2, 194, 219) -0.4%, rgb(46, 234, 255) 100.2% );
}
.purple5{
    color: black;
    background: #D5FFD0;
}
.zindex1{
    z-index: 10004;
}
.zindex2{
    z-index: 10003;
}
.zindex3{
    z-index: 10002;
}
.zindex4{
    z-index: 10001;
}
.zindex5{
    z-index: 10000;
}
.zindex6{
    z-index: 66666;
}


/* buttonssssssss */
.btn{display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px; padding-right: 20px; padding-left: 20px; margin: 10px; border: none; cursor: pointer;}
.btnsmall{display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0; padding-right: 5px; padding-left: 5px; margin: 2px; border: none; cursor: pointer;}
.btnsmallUltra{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; border: none; cursor: pointer;}
.btnsmallUltra:hover .borderwhite{border-color: #001f75;}
.btncyan{background-color: cyan; color: black;}
.btncyan:hover{background-color: white; color: darkblue; box-shadow: 5px 5px 5px rgb(142, 223, 255);}
.btngreen{background-color: #059212; color: white;}
.btngreen:hover{background-color: white; color: #059212; box-shadow: 5px 5px 5px rgb(142, 255, 148);}
.btngreen2{background-color: #006769; color: white;}
.btngreen2:hover{background-color: white; color: #006769; box-shadow: 5px 5px 5px rgb(142, 255, 148);}
.btnlightgreen{background-color: rgb(2, 214, 143); color: white;}
.btnlightgreen:hover{background-color: white; color: rgb(2, 214, 143); box-shadow: 5px 5px 5px rgb(142, 255, 148);}
.btnlightgreen2{background-color: rgb(2, 214, 143); color: darkblue;}
.btnlightgreen2:hover{background-color: white; color: rgb(2, 214, 143); box-shadow: 5px 5px 5px rgb(142, 255, 148);}
.btnlightblue{background-color: #5AB2FF; color: white;}
.btnlightblue:hover{background-color: white; color: blue; box-shadow: 5px 5px 5px rgb(142, 247, 255);}
.btnblue{background-color: blue; color: white;}
.btnblue:hover{background-color: white; color: blue; box-shadow: 5px 5px 5px rgb(142, 247, 255);}
.btndarkblue{background-color: darkblue; color: white;}
.btndarkblue:hover{background-color: white; color: darkblue; box-shadow: 5px 5px 5px rgb(142, 247, 255);}
.btnred{background-color: red; color: white;}
.btnred:hover{background-color: white; color: red; box-shadow: 5px 5px 5px rgb(255, 163, 163);}
.btndarkred{background-color: darkred; color: white;}
.btndarkred:hover{background-color: white; color: darkred; box-shadow: 5px 5px 5px rgb(253, 125, 125);}
.btnviolet{background-color: violet; color: white;}
.btnviolet:hover{background-color: white; color: violet; box-shadow: 5px 5px 5px rgb(252, 184, 250);}
.btnpurple{background-color: purple; color: white;}
.btnpurple:hover{background-color: white; color: purple; box-shadow: 5px 5px 5px rgb(253, 136, 249);}
.btnorange{background-color: rgb(238, 156, 2); color: black;}
.btnorange:hover{background-color: white; color: rgb(238, 156, 2); box-shadow: 5px 5px 5px rgb(253, 210, 130);}
.btnorangered{background-color: rgb(188, 113, 38); color: white;}
.btnorangered:hover{background-color: white; color: rgb(188, 113, 38); box-shadow: 5px 5px 5px rgb(252, 166, 120);}




.fontFamily1{font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
.fontFamily2{ font-family: "Poppins", sans-serif}
.fontFamily3{ font-family: Verdana, Geneva, Tahoma, sans-serif;}
.fontFamily4{ font-family: "Petit+Formal+Script", sans-serif}
.fontFamily5{ font-family: 'Times New Roman', Times, serif;}
.fontFamily6{ font-family: "Cinzel", sans-serif}
.fontFamily7{ font-family: "Lemonada", sans-serif}
.fontFamily8{ font-family: "Kavivanar", sans-serif}
.fontFamily9{ font-family: "Lugrasimo", sans-serif}
.fontFamily10{ font-family: "Lumanosimo", sans-serif}
.fontFamily11{ font-family: "Merienda", sans-serif}
.fontFamily12{ font-family: "Charm", sans-serif}
.fontFamily13{ font-family: "Kings", sans-serif}
.fontFamily14{ font-family: "Kalam", sans-serif}
.fontFamily15{ font-family: "Courgette", sans-serif}
.fontFamily16{ font-family: "UnifrakturMaguntia", sans-serif}
.fontFamily17{ font-family: "Tangerine", sans-serif}
.fontFamily18{ font-family: "Romanesco", sans-serif}
.fontFamily19{ font-family: "Qwigley", sans-serif}
.fontFamily20{ font-family: "Carattere", sans-serif}
.fontFamily21{ font-family: "Ephesis", sans-serif}
.fontFamily22{ font-family: "Rochester", sans-serif}
.fontFamily23{ font-family: "Allura", sans-serif}
.fontFamily24{ font-family: "Parisienne", sans-serif}
.fontFamily25{ font-family: "Splash", sans-serif}

 .regular{font-weight: 400;}
 .textWrap{text-wrap: wrap;}
 .selectWrap{white-space: normal; word-wrap:break-word; width:100%;
  /* For Firefox: */
  text-overflow: ellipsis;}

.lineHeight1{line-height: 1px;}
.lineHeight16{line-height: 16px;}
.lineHeight17{line-height: 17px;}
.lineSpacing1{line-height: 80%;}
.lineSpacing100{line-height: 100%;}
.ontop{z-index: 10;}
.ontopMost{z-index: 111119;}


/* arrowssssssss */
.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
.arrowRed {
    border: solid rgb(255, 0, 0);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }
.arrowBlue {
    border: solid rgb(0, 26, 255);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }

  .rightArrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  .leftArrow {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }

  .upArrow {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }

  .downArrow {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }


  /* buttonsssssss */
.backBtn{
  text-align: center;
  padding: 7px;
  border-radius: 10px;
  width: 100px;
  margin: 1px;
  border: none;
  box-shadow: 3px 3px 3px grey;
  transition: all 0.5s ease;
  cursor: pointer;
  color: darkblue;
  background: cyan;
  position: relative;
}

.backBtn:hover {
  background: darkblue;
  color: cyan;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.backBtnMenu{
  list-style: none;
  position: absolute;
  min-width: 300px;
  top: 28px;
  left: 0;
  display: none;
  text-align: right;
  padding: 10px;
  border-radius: 15px;
  color: cyan;
  background-color: #00374e;
  transition: all 1s ease;
}
 .backBtn:hover .backBtnMenu{
    display: inline-block;
 }

 .backBtnMenuLi{
    border-radius: 15px;
    transition: all 1s ease;
 }

 .backBtnMenuLi:hover{
    background-color: cyan;
    color: #00374e;
 }

.myButton {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border-radius: 10px;
  min-width: 120px;
  margin: 1px;
  border: none;
  box-shadow: 3px 3px 3px grey;
  transition: all 0.5s ease;
  cursor: pointer;
}

.myButton i {
  margin-right: 5px;
}

.myButtonSmall {
  font-size: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  border-radius: 10px;
  margin: 1px;
  border: none;
  box-shadow: 2px 2px 2px grey;
  transition: all 0.5s ease;
  cursor: pointer;
}

.myButtonSmall i {
  margin-right: 5px;
}




.myButtonOrange {
  color: #ffffff;
  background: orange;
}

.myButtonOrange:hover {
  background: #ffffff;
  color: orange;
  box-shadow: 3px 3px 3px rgb(255, 205, 106);
}



.myButtonYellow {
  color: #080808;
  background: rgb(246, 255, 0);
}

.myButtonYellow:hover {
  background: #2e2e2e;
  color: rgb(246, 255, 0);
  box-shadow: 3px 3px 3px rgb(233, 255, 106);
}



.myButtonCancel{
  color: red;
  background: white;
  border: 1px solid red;
}

.myButtonCancel:hover {
  background: #fd0505;
  color: white;
  border: 1px solid #ff7f7f;
  box-shadow: 3px 3px 3px rgb(255, 151, 151);
}




.myButtonCyan {
  color: darkblue;
  background: cyan;
}

.myButtonCyan:hover {
  background: darkblue;
  color: cyan;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.myButtonLightBlue2 {
  background: darkblue;
  color: cyan;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.myButtonLightBlue2:hover {
  color: white;
  background: #6EACDA;
  box-shadow: 3px 3px 3px grey;
}

.myButtonBlue {
  color: white;
  background: blue;
}

.myButtonBlue:hover {
  background: lightblue;
  color: blue;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.myButtonBlue2 {
  color: #d5f5ff;
  background: #123456;
}

.myButtonBlue2:hover {
  background: #dcefff;
  color: #123456;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.myButtonLightBlue {
  color: #003546;
  background: cyan;
}

.myButtonLightBlue:hover {
  background: #003546;
  color: white;
  box-shadow: 3px 3px 3px rgb(33, 174, 255);
}

.myButtonGreen {
  color: #ffffff;
  background: rgb(0, 161, 0);
}

.myButtonGreen:hover {
  background: #e3ffe3;
  color: rgb(0, 161, 0);
  box-shadow: 3px 3px 3px rgb(33, 255, 185);
}


.myButtonLightGreen {
  color: #013a18;
  background: #e3ffe3;
}

.myButtonLightGreen:hover {
  color: #e3ffe3;
  background: #013a18;
  box-shadow: 3px 3px 3px rgb(33, 255, 185);
}

.myButtonRed {
  color: #ffffff;
  background: #c90000;
}

.myButtonRed:hover {
  background: #ffe8e8;
  color: #c90000;
  box-shadow: 3px 3px 3px rgb(255, 155, 170);
}

.myButtonLightRed {
  color: #000000;
  background: #fc7676;
}

.myButtonLightRed:hover {
  background: #ffe8e8;
  color: #c90000;
  box-shadow: 3px 3px 3px rgb(255, 155, 170);
}


.myButtonLightBlue3 {
  color: #00538a;
  background: #91dcff;
}

.myButtonLightBlue3:hover {
  background: #00538a;
  color: #91dcff;
  box-shadow: 3px 3px 3px rgb(164, 244, 255);
}




.myCard{
    position: relative;
    width: 300px;
    height: 300px;
    border: 5px solid white;
    perspective: 1000px;
    background-color: transparent;
    border-radius: 20px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .20);
    transition: 1s ease-in-out transform, 0.4s ease-in-out box-shadow;
    transform: perspective(750px) translate3d(0px, 0px, -250px) rotateX(27deg) scale(0.9, 0.9);
}
.myCard:hover{
    transform: translate3d(0px, 0px, -250px);
    box-shadow: 0 50px 80px -20px rgba(32, 195, 187, 0.5);
}

.card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 1.5s;
}
.myCard:hover .card-inner{
    transform: rotateY(180deg);
}
.cardFront, .cardBack{
    padding: 2px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
}
.cardFront{
    font-size: 2rem;
    background: linear-gradient(to right, #50f9ff, #75a5f7);
}
.cardBack{
    font-size: 1rem;
    background: linear-gradient(to right, #0244b4, #04888d);
    color: white;
    box-shadow: 0 5px 20px #4677cb;
    transform: rotateY(180deg);
}

.glass{
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.glass1{
    z-index: 2;
    box-shadow: 3px 3px 5px 1px rgba(255,255,255,0.2);
    background-color: rgba(204, 246, 255, 0.1);
    backdrop-filter: blur(10px);
}

.glass2{
    z-index: 2;
    box-shadow: 3px 3px 5px 1px rgba(255,255,255,0.2);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    background-image: linear-gradient(
        120deg,
        rgba(140, 251, 255, 0.2),
        rgba(0,0,0,0.1)
    );
}
.glass3{
    z-index: 2;
    box-shadow: 3px 3px 5px 1px rgba(255,255,255,0.2);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255,0.3),
        rgba(0,0,0,0.2)
    );
    background-size: 30px;
    /*this makes columns*/
}
.glass4{
    z-index: 2;
    box-shadow: 3px 3px 5px 1px rgba(255,255,255,0.2);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255,0.3),
        rgba(0,0,0,0.2)
    );
    background-size: 30px 30px;
    /*this makes squares*/
}

.imagedoc1{
    width: 100%;
    height: 200px;
    background-image: url('images/imagedoc2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.imagedoc1Div{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
}
.userName{
    padding: 5px 25px;
    border-radius: 15px;
    font-size: 12px;
    font-style: italic;
    color: white;
    background-color: rgb(0, 46, 67);
}

/* The side navigation menu */
.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; /* Stay at the top */
    left: 0;
    background-color: #002e4c; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }

  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: cyan;
    display: block;
    transition: 0.3s;
  }

  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    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;
  }

  /* 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;}
  }

#navMain{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50px;
    left: 0;
}
.myNavBar{
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
    z-index: 55555;
}

#myNavBarMenuBtn{
  display: none;
}

.homeBtn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    min-height: 70px;
    padding: 10px;
    color: darkblue;
    cursor: pointer;
    transition: all 0.6s ease;
}
.navMenu{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    min-height: 70px;

}
.navMenuItem{
    margin: 5px;
    padding: 2px 25px;
    border-radius: 15px;
    color: rgb(0, 27, 40);
    background-color: skyblue;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.6s ease;
}
.navMenuItem:hover{
    color: darkblue;
    background-color: cyan;
}

.signOut{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100px;
    min-height: 70px;
    color: red;
    cursor: pointer;
    transition: all 0.6s ease;
}
.signOut:hover{
    color: white;
}
.burgerMenu{
    height: 0;
    display: none;
}
.burger{
    width: 30px;
    margin: 2px 0;
    border-radius: 2px;
    border: 2px solid rgb(0, 190, 0);
    /* transition: all 1s ease; */
}
/* .burgerMenu:hover .burger:nth-of-type(even){
    display: none;
}
.burgerMenu:hover .burger:nth-child(1){
    transform: translateY(3px)  rotate(45deg);
}
.burgerMenu:hover .burger:nth-child(3){
    transform:  translateY(-3px)  rotate(-45deg);
} */



.slideFromRight {
  white-space: nowrap;
  position: fixed;
  bottom: 0;
  right: 0;
  color: white;
  background: rgb(0, 110, 140);
  width: 0;
  height: 400px;
  /*min-height: 400px;*/
  /*max-height: 100%;*/
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 5px 5px 5px grey;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 222;
  transition: all 1s ease;
}


.slideFromRightShow{
  width: 300px;
}


.show {display: block;}


.loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: cyan;
  }
    .loader:before,
    .loader:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: inherit;
      height: inherit;
      border-radius: 50%;
      transform: rotateX(70deg);
      animation: 1s spin linear infinite;
    }
    .loader:after {
      color: #FF3D00;
      transform: rotateY(70deg);
      animation-delay: .4s;
    }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }


  .loader2 {
    width: 16px;
    height: 16px;
    position: relative;
    left: -32px;
    border-radius: 50%;
    color: cyan;
    background: currentColor;
    box-shadow: 32px 0 , -32px 0 ,  64px 0;
  }

  .loader2::after {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background:#FF3D00;
    animation: move 3s linear infinite alternate;
  }

  @keyframes move {
    0% , 5%{
      left: -32px;
      width: 16px;
    }
    15% , 20%{
      left: -32px;
      width: 48px;
    }
    30% , 35%{
      left: 0px;
      width: 16px;
    }
    45% , 50%{
      left: 0px;
      width: 48px;
    }
    60% , 65%{
      left: 32px;
      width: 16px;
    }

    75% , 80% {
      left: 32px;
      width: 48px;
    }
    95%, 100% {
      left: 64px;
      width: 16px;
    }
  }



  .loader3 {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0),
                      linear-gradient(#DDD 50px, transparent 0);
    background-size: 8px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    animation: pillerPushUp 4s linear infinite;
  }
  .loader3:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: #de3500;
    border-radius: 50%;
    animation: ballStepUp 4s linear infinite;
  }

@keyframes pillerPushUp {
  0% , 40% , 100%{background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px}
  50% ,  90% {background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px}
}

@keyframes ballStepUp {
  0% {transform: translate(0, 0)}
  5% {transform: translate(8px, -14px)}
  10% {transform: translate(15px, -10px)}
  17% {transform: translate(23px, -24px)}
  20% {transform: translate(30px, -20px)}
  27% {transform: translate(38px, -34px)}
  30% {transform: translate(45px, -30px)}
  37% {transform: translate(53px, -44px)}
  40% {transform: translate(60px, -40px)}
  50% {transform: translate(60px, 0)}
  57% {transform: translate(53px, -14px)}
  60% {transform: translate(45px, -10px)}
  67% {transform: translate(37px, -24px)}
  70% {transform: translate(30px, -20px)}
  77% {transform: translate(22px, -34px)}
  80% {transform: translate(15px, -30px)}
  87% {transform: translate(7px, -44px)}
  90% {transform: translate(0, -40px)}
  100% {transform: translate(0, 0);}
}



.loader4{
    display: block;
    position: relative;
    height: 12px;
    width: 80%;
    border: 1px solid grey;
    border-radius: 10px;
    overflow: hidden;
  }
  .loader4:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #FF3D00;
    animation: 6s prog ease-in infinite;
  }

  @keyframes prog {
    to  {   width: 100%;}
  }



  .loader5 {
    font-size: 48px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    box-sizing: border-box;
    text-shadow: 0 0 2px skyblue, 0 0 1px skyblue, 0 0 1px skyblue;
    letter-spacing: 2px;
    position: relative;
  }
  .loader5::after {
    content: 'Loading';
    position: absolute;
    left: 0;
    top: 0;
    color: cyan;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    animation: animloader5 6s linear infinite;
  }

  @keyframes animloader5 {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }



  .loader6 {
    width: 64px;
    height: 64px;
    position: relative;
    background: #FFF;
    border-radius: 4px;
    overflow: hidden;
  }
  .loader6:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    transform: rotate(45deg) translate(30%, 40%);
    background: #ff9371;
    box-shadow: 32px -34px 0 5px #ff3d00;
    animation: slide 2s infinite ease-in-out alternate;
  }
  .loader6:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff3d00;
    transform: rotate(0deg);
    transform-origin: 35px 145px;
    animation: rotate 2s infinite ease-in-out;
  }

  @keyframes slide {
    0% , 100%{ bottom: -35px}
    25% , 75%{ bottom: -2px}
    20% , 80%{ bottom: 2px}
  }
  @keyframes rotate {
    0% { transform: rotate(-15deg)}
    25% , 75%{ transform: rotate(0deg)}
    100% {  transform: rotate(25deg)}
  }

  .loader7 {
    position: relative;
    width: 108px;
    display: flex;
    justify-content: space-between;
  }
  .loader7::after , .loader7::before  {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #FFF;
    background-image:  radial-gradient(circle 14px, #0d161b 100%, transparent 0);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove 10s infinite , blink 10s infinite;
  }
  @keyframes eyeMove {
    0%  , 10% {     background-position: 0px 0px}
    13%  , 40% {     background-position: -15px 0px}
    43%  , 70% {     background-position: 15px 0px}
    73%  , 90% {     background-position: 0px 15px}
    93%  , 100% {     background-position: 0px 0px}
  }
  @keyframes blink {
    0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
    { height: 48px}
    11% , 21% ,41% , 61% , 71% , 91% , 99%
    { height: 18px}
  }

  .loader8 {
    width: 60px;
    height: 40px;
    position: relative;
    display: inline-block;
    --base-color: #263238; /*use your base color*/
  }
  .loader8::before {
    content: '';
    left: 0;
    top: 0;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFF;
    background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 3s linear infinite;
  }
  .loader8::after {
    content: '';
    left: 35px;
    top: 15px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FFF;
    background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 4s linear infinite reverse;
  }
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }


  .loader9{
    width: 100px;
    height: 75px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    border-radius: 100%;
  }
  .loader9:before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    border: 15px solid transparent;
    border-top: 25px solid #fff;
    transform: rotate(45deg);
    top: 50px;
    left: -15px;
  }

  .loader9:after {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    border-radius: 50%;
    background-color: #FF3D00;
    box-shadow: 20px 0 #FF3D00, -20px 0 #FF3D00;
    animation: flash 0.5s ease-out infinite alternate;
  }

  @keyframes flash {
    0% {
      background-color: rgba(255, 60, 0, 0.25);
      box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 #FF3D00;
    }
    50% {
      background-color: #FF3D00;
      box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 rgba(255, 60, 0, 0.25);
    }
    100% {
      background-color: rgba(255, 60, 0, 0.25);
      box-shadow: 20px 0 #FF3D00, -20px 0 rgba(255, 60, 0, 0.25);
    }
  }



  .loader10 {
    width: 24px;
    height: 80px;
    display: block;
    margin: 35px auto 0;
    border: 1px solid #FFF;
    border-radius: 0 0 50px 50px;
    position: relative;
    box-shadow: 0px 0px #FF3D00 inset;
    background-image: linear-gradient(#FF3D00 100px, transparent 0);
    background-position: 0px 0px;
    background-size: 22px 80px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: animloader100 6s linear infinite;
  }
  .loader10::after {
    content: '';
    box-sizing: border-box;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    border: 1px solid #FFF;
    border-radius: 50%;
    width: 28px;
    height: 6px;
  }
  .loader10::before {
    content: '';
    box-sizing: border-box;
    left: 0;
    bottom: -4px;
    border-radius: 50%;
    position: absolute;
    width: 6px;
    height: 6px;
    animation: animloader101 6s linear infinite;
  }

  @keyframes animloader100 {
    0% {
      background-position: 0px 80px;
    }
    100% {
      background-position: 0px 0px;
    }
  }

  @keyframes animloader101 {
    0% {
      box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
    }
    20% {
      box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
    }
    40% {
      box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
    }
    60% {
      box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
    }
    80% {
      box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
    }
    100% {
      box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
    }
  }


  .loader11 {
    width: 150px;
    height: 150px;
    background-color: #ff3d00;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
      0 5px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
  .loader11:before,
  .loader11:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 45%;
    top: -40%;
    background-color: #fff;
    animation: wave 5s linear infinite;
  }
  .loader11:before {
    border-radius: 30%;
    background: rgba(255, 255, 255, 0.4);
    animation: wave 5s linear infinite;
  }
  @keyframes wave {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loader12 {
    width: 96px;
    box-sizing: content-box;
    height: 48px;
    background: #FFF;
    border-color: #de3500;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    animation: 3s yinYang linear infinite;
  }
  .loader12:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #FFF;
    border: 18px solid #de3500;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  }
  .loader12:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #de3500;
    border: 18px solid #FFF;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  }
  @keyframes yinYang {
    100%{transform: rotate(360deg)}
  }


  .showEditsHeading, .showEditsContent{position: relative;}
.showEditsHeading .showEditsHeadingDiv{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.showEditsHeading:hover .showEditsHeadingDiv{
    display: flex;
}

.showEditsContent .showEditsContentDiv{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.showEditsContent:hover{background-color: #E8F9FF;}
.showEditsContent:hover .showEditsContentDiv{
    display: flex;
}

#displayDiv{
    width: 100%;
    height: calc(100vh - 320px);
    overflow: auto;
}

#combo_chart {
    min-height: 500px;
    background-color: #f5f5f5; /* Visual debug */
  }