/**
 * @package WizLab.it generic file
 * @desc Generic admin area CSS
 * @author WizLab.it
 * @version 20240318.143 - Hard linked file
 */

/* Fonts */
@font-face { font-family:"Nunito Sans"; font-style:normal; font-weight:400; src:url(/css/fonts/NunitoSans.woff2) format("woff2"); }


/* Generic HTML Tags */
* { box-sizing:border-box; }
h1, h2, h3, h4, h5, h6 { color:#222; }
h4 { margin-bottom:6px; }
h5, h6 { margin-top:6px; margin-bottom:0px; }
h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type, h5:first-of-type, h6:first-of-type { margin-top:0; }
code { display:block; padding:10px; background-color:#F6F8FA; overflow-x:scroll; }
img { vertical-align:middle; }
a { color:#F22D2D; }
input, select { outline:0; }
  input:invalid, select:invalid { background:#FDD !important; }


/* Form structure */
.form { width:50%; margin-bottom:50px; background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); padding:3em 2em; }
  .form fieldset { margin:20px 0; border:none; }
    .form h3 { font-size:22px; }
      .form h3 ~ fieldset { margin-top:30px; }
  .form .field { margin-bottom:20px; }
    .form input, .form select, .form textarea, .form .data { font-family:"Nunito Sans"; font-style:normal; font-size:12px; resize:vertical; margin-bottom:1px; padding:0.7em; display:block; background-color:#F3F3F3; color:#636363; width:100%; border:none; border-bottom:1px solid #757575; }
      .form input[type=checkbox], .form input[type=radio] { width:auto; display:inline-block; vertical-align:text-bottom; }
      .form .error input, .form .error select, .form .error textarea, .form .error > div.option:last-of-type { border-bottom-color:#F44336 !important; }
    .form select { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjIwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyI+PC9wb2x5Z29uPjwvc3ZnPg=="); background-repeat:no-repeat; background-position:right center; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
      .form input:focus, .form select:focus, .form textarea:focus { border-bottom-width:2px; border-bottom-color:#2E4060; margin-bottom:0; }
    .form .field > div.option:last-of-type { border-bottom:1px solid #757575; padding-bottom:8px; }
    .form label { color:grey; }
      .form input:focus ~ label, .form select:focus ~ label, .form textarea:focus ~ label { color:#2E4060; }
      .form input[type=checkbox] ~ label, .form input[type=radio] ~ label { vertical-align:middle; }
  .form .error { font-size:12px; color:#F44336; }
  .form .tip { font-size:11px; color:grey; font-style:italic; }


/* Filter */
.filter { width:auto; margin-bottom:20px; padding:1em; }
  .filter .filterItem { display:inline-block; vertical-align:bottom; margin-right:5px; }
    .filter .filterItem input, .filter .filterItem select { width:120px; padding:5px; height:26px; }


/* Pagination */
.pagination { float:right; background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); margin-bottom:5px; padding:3px; }
  .pagination.bottom { margin-top:-46px; }
  .pagination a { display:inline-block; }
  .pagination .currentPage { font-family:"Nunito Sans"; width:50px; background:#F3F3F3; padding:4px; border:none; border-bottom:1px solid #757575; font-weight:bold; text-align:center; }


/* Tables */
table.data { width:100%; margin-bottom:50px; background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); }
  table.data.tiny { margin-bottom:5px; border:2px solid #CCC; }
  table.data tr { background-color:#FFF; }
    table.data tr:nth-child(odd) { background-color:#F8F9FA; }
    table.data tr:hover { background-color:#F0F1F3; }
    table.data tr th { padding:4px; text-align:left; background-color:#FFF; border-bottom:2px solid rgba(0,0,0,.12); }
    table.data tr td { text-align:left; padding:3px; border-bottom:1px solid rgba(0,0,0,.12); }
      table.data.tiny tr td { padding:1px; }
      table.data tr:last-of-type td { border-bottom:none; }


/* Gallery */
.gallery { display:flex; flex-wrap:wrap; width:100%; margin-bottom:50px; padding:5px; background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); }
  .gallery .image { width:400px; background-color:#DDD; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); padding:10px; margin:10px; }
    .gallery .image .preview { float:left; margin-right:10px; }
    .gallery .image .details { float:left; }
      .gallery .image .details div { margin-bottom:15px; }
      .gallery .image .details textarea { width:190px; resize:none; font-family:"Nunito Sans"; font-size:12px; }


/* Buttons */
.buttonsBox { position:sticky; bottom:0; background:rgba(255,255,255,0.75); padding:20px; text-align:right; }
button, a.button { display:inline-block; margin:1px 0; padding:1px 4px; font-size:11px; color:#FFF; line-height:20px; text-decoration:none; background-color:#47BAC1; border:1px solid #47BAC1; border-radius:3px; cursor:pointer; }
  button:hover, a.button:hover { background-color:#39A2A9; border-color:#36999F; }
  button.large, a.button.large { padding:6px 10px; font-size:13px; }
  button.fullwidth, a.button.fullwidth { width:100%; }
  button.small, a.button.small { margin:3px 0; padding:0 3px; line-height:16px; font-size:10px; }
  button.icon, a.button.icon { margin:0 5px; padding:0; background-color:transparent; border:none; }
    button.icon img, a.button.icon img { width:16px; }
  button.grey, a.button.grey { background-color:#808080; border-color:#808080; }
    button.grey:hover, a.button.grey:hover { background-color:#606060; }


/* Messages */
.message { background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); width:60%; margin:0 auto 30px; }
  .message h3 { margin:0; padding:15px; color:#FFF; font-size:18px; }
    .message.ok h3 { background-color:#4CAF50; }
    .message.warning h3 { background-color:#FFA500; }
    .message.error h3 { background-color:#F44336; }
  .message .text { margin:0; padding:15px; }
    .message .text p { margin:0 0 10px; }
  .message .buttons { margin:0; padding:15px; text-align:right; }
    .message .buttons button, .message .buttons a.button { margin-left:15px; }


/* Cards */
.cardBox { display:flex; flex-wrap:wrap; justify-content:center; }
  .cardBox .card { margin:20px; background-color:#FFF; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); transition:0.3s; width:200px; text-align:center; }
    .cardBox .card:hover { box-shadow:0 0 15px 0 rgba(53,64,82,0.55); cursor:pointer; }
    .cardBox .card h4 { font-size:14px; }
    .cardBox .card .image { background-color:#357BD8; width:200px; height:auto; padding:20px }
      .cardBox .card .image img { width:100%; }
    .cardBox .card .text { padding:16px; }


/* Dialog box */
#dialogboxcontainer { display:none; position:fixed; top:0; right:0; left:0; bottom:0; padding:10vh 20vw; background-color:rgba(0,0,0,0.12); overflow:hidden; }
  #dialogbox { width:100%; height:100%; padding:10px; background-color:#FFF; box-shadow:0 0 10px 0 #999; overflow:hidden; }


/* Generic styles */
.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
.blockcenter { margin:0 auto; }
.textcenter { text-align:center !important; }
.textright { text-align:right !important; }
.note { font-size:10px; font-style:italic; }
.pre { white-space:pre-wrap; word-wrap:anywhere; }
.hiddenDetails { display:none; }
.nowrap { white-space:nowrap; }
.cell { display:inline-block; vertical-align:middle; margin-right:10px; }
.greengnd { background-color:#3CB371 !important; color:#FFF; }
.greentext { color:#3CB371 !important; }
.redgnd { background-color:#F44336 !important; color:#FFF; }
.redtext { color:#F44336 !important; }
.transparenttext { color:transparent !important; }
.graygnd { background-color:#CCCCCC !important; }
.bold { font-weight:bold; }


/* Page structure */
body { font-family:"Nunito Sans"; font-size:12px; color:#333; background-color:#FFF; margin:0; padding:0; }
#wrapper { margin-left:0; transition:margin-left 300ms; }
  body.menuExpanded #wrapper { margin-left:250px; }


/* Main menu */
nav#mainMenu { position:fixed; top:0; bottom:0; float:left; margin-left:-255px; width:250px; overflow-y:auto; transition:margin-left 300ms ease; background-color:#354052; }
  body.menuExpanded nav#mainMenu { margin-left:0; }
  nav#mainMenu .userDetails { padding:10px 20px 40px; color:white; }
    nav#mainMenu .userDetails .logout { position:absolute; top:10px; right:10px; cursor:pointer; padding:10px; border:none; background-color:transparent; }
    nav#mainMenu .userDetails h4 { margin:10px 0 0; font-size:24px; color:#E9ECEF; }
    nav#mainMenu .userDetails h5 { margin:0; font-size:12px; font-weight:normal; color:#E9ECEF; }
    nav#mainMenu .userDetails p { margin:0; }
      nav#mainMenu .userDetails p a { color:#E9ECEF; }
  nav#mainMenu ul { list-style:none; margin:0; padding:0; }
    nav#mainMenu ul li a { display:block; font-size:13px; text-decoration:none; color:#ADB5BD; padding:10px; }
      nav#mainMenu ul li a:hover, nav#mainMenu ul li a.active { color:#E9ECEF; background-color:#2D3646; }
      nav#mainMenu ul li.subpage a { padding:6px 10px 6px 30px; font-size:12px; }


/* Header */
header { position:sticky; top:0; color:#222; box-shadow:0 0 15px 0 rgba(53,64,82,0.15); }
  header nav.appbar { position:relative; background-color:#FFF; padding:0; }
    header nav.appbar button { background-color:transparent; border:none; margin:0 10px 0 20px; padding:0; display:inline-block; cursor:pointer; transition:all 300ms ease-in-out; }
      header.tiny nav.appbar button { margin:2px 8px 0 15px; }
      header nav.appbar button img { width:40px; height:40px; margin:5px; transition:all 300ms ease-in-out; }
        header.tiny nav.appbar button img { width:30px; height:30px; margin:0; }
    header nav.appbar a { color:#222; text-decoration:none; }
    header nav.appbar .titlebox { display:inline-block; position:absolute; top:50%; transform:translateY(-50%); }
      header nav.appbar .title { font-size:28px; margin:0 15px 0 0; color:white; display:inline-block; transition:all 300ms ease-in-out; }
        header.tiny nav.appbar .title { font-size:20px; margin:0 10px 0 0; }
      header nav.appbar .subtitle { font-size:18px; margin:0; opacity:0.8; font-weight:400; color:white; display:inline-block; transition:all 300ms ease-in-out; }
        header.tiny nav.appbar .subtitle { font-size:14px; }


/* Main */
main { margin-bottom:50px; padding:20px; min-height:400px; }
  main>h1 { margin-bottom:5px; text-align:center; }
  main>h2 { font-style:italic; font-weight:normal; text-align:center; }

/* Receipt */
.receipt { width:100%; max-width:400px; }
  .receipt h4 { padding:25px 0 10px; font-size:22px; }
  .receipt h5 { padding:10px 0 20px; font-size:16px; }
  .details { text-align:center; font-size:14px; border-top:1px dotted #CCC; border-bottom:1px dotted #CCC; }
    .details b { font-size:15px; }
  .fields { padding:0 15px; }
    .fields div { border-bottom:1px dotted #CCC; padding:20px 5px; }


/* Footer */
footer { color:#6C757D; background-color:#FFF; text-align:center; padding:1px; border-top:1px solid #DEE2E6; }
  .page-home footer { position:fixed; bottom:0; width:100%; }
  footer p { letter-spacing:1px; }
  footer a { color:#6C757D; text-decoration:none; }
    footer a:hover { text-decoration:underline; }
  .itfLanguageSelector ul { list-style:none; padding:0; }
    .itfLanguageSelector ul li { display:inline-block; padding:2px 5px; }

/* SMALL SCREENS */
@media only screen and (max-width:500px) {
  .form { width:90%; }
}


/* PRINT */
@media only print {
  .noprint { display:none; }
}