:root {
   --color-white: #F5F5F5;
   --color-black: #141414;
   --color-orange: #F8BB86;
   --color-green: #A5DC86;
   --color-red: #F27474;
   --color-primary-1: #103F54;
   --color-primary-2: #5A99B7;
   --color-primary-3: #207EA9;
   --color-primary-4: #78CDF5;
   --color-primary-5: #3e3e3e;
}

.color-red { color: var(--color-red); }
.color-green { color: var(--color-green); }
.color-orange { color: var(--color-orange); }
.color-blue { color: var(--color-primary-4); }

.background-red { background-color: var(--color-red) !important; }
.background-green { background-color: var(--color-green) !important; }
.background-orange { background-color: var(--color-orange) !important; }
.background-blue { background-color: var(--color-primary-4) !important; }

.flex-col {
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;
}

.flex-row {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;

}


.content-box {
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;

   background-color: var(--color-primary-3);
   padding: 1.5rem;
   border-radius: 16px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   font-family: system-ui, sans-serif;
 
   font-size: 2em;
   color: var(--color-white);  
}

.content-box img {
   border-radius: 16px;
   max-width: 200px;
}




/* Dashboard Spinning NAV - START */
.page-nav {
   width: 100%;
   min-height: 10px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   padding: .5em;
   background: #161619;
   -webkit-box-shadow: 0px 1px 5px 0px #4c4c4c;
   -moz-box-shadow: 0px 1px 5px 0px #4c4c4c;
   box-shadow: 0px 1px 5px 0px #4c4c4c;
}

.page-auto i {
   color: #6b6b6b;
   font-size: 25px;
}

.page-arrow i {
   color: #005080;
   color: white;
   font-size: 25px;
   cursor: pointer;
}

#pageLeft i {
   padding-left: 1em;
}

#pageRight i {
   padding-right: 1em;
}

.arrowDisable {
   color: gray;
}

.spin i {
   color: #007dc7;
   animation-name: spin;
   animation-duration: 5000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* Dashboard Spinning NAV - END */





.linkCop {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.1em;
   margin-left: 0.5em;
   border-radius: 5px;
   width: 30px;
   height: 30px;
   background: #f9f9f9;
   box-shadow: 0px 0px 1px 1px #4ea5fc;
   cursor: pointer;
   color: #4ea5fc;
}



.db-head {
   width: 100%;
   /* min-width: 600px; */
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   /* background: var(--color-black); */
}

.db-head-top {
   width: 100%;
   /* min-width: 600px; */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background: var(--color-primary-1);
}

.db-head-logo {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}



/* **************************>>> Menu Bar <<<**************************  */


.menu-bar-btn {
   cursor: pointer;
   width: 2%;
   min-width: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2em;
}

.menu-bar-content {
   display: flex;
   flex-flow: column;
   justify-content: flex-start;
   align-items: center;
   position: fixed;
   top: 43px;
   /* right: -100vw; */
   width: 100%;
   height: 100%;
   /* display: none; */

   -webkit-font-smoothing: antialiased;
   transform-origin: 0% 0%;
   transform: translate(100%, 0);

   background: var(--color-primary-5);
   transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1.0);
   z-index: 90000;
}


.menu-bar-btn-close {
   display: none;
}

.menuCheckbox {
   appearance: checkbox;
   zoom: 3;
}







/* **************************>>> FORM <<<**************************  */
table thead th {
   background: var(--color-black);
   color: var(--color-white);
}

table {
   border: none !important;
   border-collapse: collapse;
   width: 100%;
   /* background: var(--color-white);; */
}

table thead th {
   padding: .5em 0;
}

table thead th {
   border-top: 1px solid #8e8e8e !important;
}

table thead th:last-child {
   border-top: 1px solid #8e8e8e !important;
   border-right: 1px solid #8e8e8e !important;
   border-top-right-radius: 5px;
}

table thead th:first-child {
   border-top: 1px solid #8e8e8e !important;
   border-left: 1px solid #8e8e8e !important;
   border-top-left-radius: 5px;
}

table th {
   border: none !important;
   border-right: 1px solid #8e8e8e !important;
   text-align: center;
   cursor: pointer;
}

table th:first-child {
   border: none !important;
   border-right: 1px solid #8e8e8e !important;
   border-radius: 5px 0 0 0;
}

table th:last-child {
   border: none !important;
   border-radius: 0 5px 0 0;
}

table td:first-child {
   border-left: 1px solid #8e8e8e !important;
}

table td {
   border-bottom: 1px solid #8e8e8e !important;
   border-right: 1px solid #8e8e8e !important;
}
table tr:last-child td:first-child {
   border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child {
   border-bottom-right-radius: 5px;
}



/* **************************>>> Image Selection Lib <<<**************************  */

.img-list-wrap {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-height: 60vh;
}

.img-sel {
   cursor: pointer;
   padding: 0.2em;
}

.img-sel img:hover {
   background: lightgreen;
}

.img-sel img {
   width: 150px;
   height: 150px;
   border-radius: 10px;
   border: 1px solid black;
}

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

   .db-head-top {
      justify-content: space-evenly;
   }

   .db-head-logo img {
      max-width: 50px;
   }
}