/* ====================== *
 * ## Extra Small (XS) ##
 *
 * @min-width: 0px;
 * @max-width: 576px;
 * ====================== */

/* ## only on XS ## */
@media (max-width: 575px)
{
   /* =========================== *
    * ## Databrowser Container ##
    * =========================== */

   .databrowser-container .map-wrapper[map-size="large"] {
      height: calc(100vh - 1.5rem - 50px);
   }


   /* ========================= *
    * ## Databrowser Spacing ##
    * ========================= */

   /* ## margin ## */
   .db-page .m-xs-0,
   .db-page .m-xs-1 { margin: 0 !important; }
   .db-page .m-xs-2 { margin: 0.25rem !important; }
   .db-page .m-xs-3 { margin: 0.5rem !important; }
   .db-page .m-xs-4 { margin: 1rem !important; }
   .db-page .m-xs-5 { margin: 1.5rem !important; }

   /* # top # */
   .db-page .mt-xs-0, .db-page .my-xs-0,
   .db-page .mt-xs-1, .db-page .my-xs-1 { margin-top: 0 !important; }
   .db-page .mt-xs-2, .db-page .my-xs-2 { margin-top: 0.25rem !important; }
   .db-page .mt-xs-3, .db-page .my-xs-3 { margin-top: 0.5rem !important; }
   .db-page .mt-xs-4, .db-page .my-xs-4 { margin-top: 1rem !important; }
   .db-page .mt-xs-5, .db-page .my-xs-5 { margin-top: 1.5rem !important; }

   /* # right # */
   .db-page .mr-xs-0, .db-page .mx-xs-0,
   .db-page .mr-xs-1, .db-page .mx-xs-1 { margin-right: 0 !important; }
   .db-page .mr-xs-2, .db-page .mx-xs-2 { margin-right: 0.25rem !important; }
   .db-page .mr-xs-3, .db-page .mx-xs-3 { margin-right: 0.5rem !important; }
   .db-page .mr-xs-4, .db-page .mx-xs-4 { margin-right: 1rem !important; }
   .db-page .mr-xs-5, .db-page .mx-xs-5 { margin-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .mb-xs-0, .db-page .my-xs-0,
   .db-page .mb-xs-1, .db-page .my-xs-1 { margin-bottom: 0 !important; }
   .db-page .mb-xs-2, .db-page .my-xs-2 { margin-bottom: 0.25rem !important; }
   .db-page .mb-xs-3, .db-page .my-xs-3 { margin-bottom: 0.5rem !important; }
   .db-page .mb-xs-4, .db-page .my-xs-4 { margin-bottom: 1rem !important; }
   .db-page .mb-xs-5, .db-page .my-xs-5 { margin-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .ml-xs-0, .db-page .mx-xs-0,
   .db-page .ml-xs-1, .db-page .mx-xs-1 { margin-left: 0 !important; }
   .db-page .ml-xs-2, .db-page .mx-xs-2 { margin-left: 0.25rem !important; }
   .db-page .ml-xs-3, .db-page .mx-xs-3 { margin-left: 0.5rem !important; }
   .db-page .ml-xs-4, .db-page .mx-xs-4 { margin-left: 1rem !important; }
   .db-page .ml-xs-5, .db-page .mx-xs-5 { margin-left: 1.5rem !important; }

   /* ## padding ## */
   .db-page .p-xs-0,
   .db-page .p-xs-1 { padding: 0 !important; }
   .db-page .p-xs-2 { padding: 0.25rem !important; }
   .db-page .p-xs-3 { padding: 0.5rem !important; }
   .db-page .p-xs-4 { padding: 1rem !important; }
   .db-page .p-xs-5 { padding: 1.5rem !important; }

   /* # top # */
   .db-page .pt-xs-0, .db-page .py-xs-0,
   .db-page .pt-xs-1, .db-page .py-xs-1 { padding-top: 0 !important; }
   .db-page .pt-xs-2, .db-page .py-xs-2 { padding-top: 0.25rem !important; }
   .db-page .pt-xs-3, .db-page .py-xs-3 { padding-top: 0.5rem !important; }
   .db-page .pt-xs-4, .db-page .py-xs-4 { padding-top: 1rem !important; }
   .db-page .pt-xs-5, .db-page .py-xs-5 { padding-top: 1.5rem !important; }

   /* # right # */
   .db-page .pr-xs-0, .db-page .px-xs-0,
   .db-page .pr-xs-1, .db-page .px-xs-1 { padding-right: 0 !important; }
   .db-page .pr-xs-2, .db-page .px-xs-2 { padding-right: 0.25rem !important; }
   .db-page .pr-xs-3, .db-page .px-xs-3 { padding-right: 0.5rem !important; }
   .db-page .pr-xs-4, .db-page .px-xs-4 { padding-right: 1rem !important; }
   .db-page .pr-xs-5, .db-page .px-xs-5 { padding-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .pb-xs-0, .db-page .py-xs-0,
   .db-page .pb-xs-1, .db-page .py-xs-1 { padding-bottom: 0 !important; }
   .db-page .pb-xs-2, .db-page .py-xs-2 { padding-bottom: 0.25rem !important; }
   .db-page .pb-xs-3, .db-page .py-xs-3 { padding-bottom: 0.5rem !important; }
   .db-page .pb-xs-4, .db-page .py-xs-4 { padding-bottom: 1rem !important; }
   .db-page .pb-xs-5, .db-page .py-xs-5 { padding-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .pl-xs-0, .db-page .px-xs-0,
   .db-page .pl-xs-1, .db-page .px-xs-1 { padding-left: 0 !important; }
   .db-page .pl-xs-2, .db-page .px-xs-2 { padding-left: 0.25rem !important; }
   .db-page .pl-xs-3, .db-page .px-xs-3 { padding-left: 0.5rem !important; }
   .db-page .pl-xs-4, .db-page .px-xs-4 { padding-left: 1rem !important; }
   .db-page .pl-xs-5, .db-page .px-xs-5 { padding-left: 1.5rem !important; }
}


/* ================== *
 * ## Small (SM) ##
 *
 * @min-width: 576px;
 * @max-width: 768px;
 * ================== */

/* ## for SM and larger ## */
@media (min-width: 576px)
{
   /* =========================== *
    * ## Databrowser Container ##
    * =========================== */

   .databrowser-container .map-wrapper[map-size="large"] {
      height: calc(100vh - 1.5rem - 80px);
   }


   /* ========================= *
    * ## Databrowser Spacing ##
    * ========================= */

   /* ## margin ## */
   .db-page .m-sm-0,
   .db-page .m-sm-1 { margin: 0 !important; }
   .db-page .m-sm-2 { margin: 0.25rem !important; }
   .db-page .m-sm-3 { margin: 0.5rem !important; }
   .db-page .m-sm-4 { margin: 1rem !important; }
   .db-page .m-sm-5 { margin: 1.5rem !important; }

   /* # top # */
   .db-page .mt-sm-0, .db-page .my-sm-0,
   .db-page .mt-sm-1, .db-page .my-sm-1 { margin-top: 0 !important; }
   .db-page .mt-sm-2, .db-page .my-sm-2 { margin-top: 0.25rem !important; }
   .db-page .mt-sm-3, .db-page .my-sm-3 { margin-top: 0.5rem !important; }
   .db-page .mt-sm-4, .db-page .my-sm-4 { margin-top: 1rem !important; }
   .db-page .mt-sm-5, .db-page .my-sm-5 { margin-top: 1.5rem !important; }

   /* # right # */
   .db-page .mr-sm-0, .db-page .mx-sm-0,
   .db-page .mr-sm-1, .db-page .mx-sm-1 { margin-right: 0 !important; }
   .db-page .mr-sm-2, .db-page .mx-sm-2 { margin-right: 0.25rem !important; }
   .db-page .mr-sm-3, .db-page .mx-sm-3 { margin-right: 0.5rem !important; }
   .db-page .mr-sm-4, .db-page .mx-sm-4 { margin-right: 1rem !important; }
   .db-page .mr-sm-5, .db-page .mx-sm-5 { margin-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .mb-sm-0, .db-page .my-sm-0,
   .db-page .mb-sm-1, .db-page .my-sm-1 { margin-bottom: 0 !important; }
   .db-page .mb-sm-2, .db-page .my-sm-2 { margin-bottom: 0.25rem !important; }
   .db-page .mb-sm-3, .db-page .my-sm-3 { margin-bottom: 0.5rem !important; }
   .db-page .mb-sm-4, .db-page .my-sm-4 { margin-bottom: 1rem !important; }
   .db-page .mb-sm-5, .db-page .my-sm-5 { margin-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .ml-sm-0, .db-page .mx-sm-0,
   .db-page .ml-sm-1, .db-page .mx-sm-1 { margin-left: 0 !important; }
   .db-page .ml-sm-2, .db-page .mx-sm-2 { margin-left: 0.25rem !important; }
   .db-page .ml-sm-3, .db-page .mx-sm-3 { margin-left: 0.5rem !important; }
   .db-page .ml-sm-4, .db-page .mx-sm-4 { margin-left: 1rem !important; }
   .db-page .ml-sm-5, .db-page .mx-sm-5 { margin-left: 1.5rem !important; }

   /* ## padding ## */
   .db-page .p-sm-0,
   .db-page .p-sm-1 { padding: 0 !important; }
   .db-page .p-sm-2 { padding: 0.25rem !important; }
   .db-page .p-sm-3 { padding: 0.5rem !important; }
   .db-page .p-sm-4 { padding: 1rem !important; }
   .db-page .p-sm-5 { padding: 1.5rem !important; }

   /* # top # */
   .db-page .pt-sm-0, .db-page .py-sm-0,
   .db-page .pt-sm-1, .db-page .py-sm-1 { padding-top: 0 !important; }
   .db-page .pt-sm-2, .db-page .py-sm-2 { padding-top: 0.25rem !important; }
   .db-page .pt-sm-3, .db-page .py-sm-3 { padding-top: 0.5rem !important; }
   .db-page .pt-sm-4, .db-page .py-sm-4 { padding-top: 1rem !important; }
   .db-page .pt-sm-5, .db-page .py-sm-5 { padding-top: 1.5rem !important; }

   /* # right # */
   .db-page .pr-sm-0, .db-page .px-sm-0,
   .db-page .pr-sm-1, .db-page .px-sm-1 { padding-right: 0 !important; }
   .db-page .pr-sm-2, .db-page .px-sm-2 { padding-right: 0.25rem !important; }
   .db-page .pr-sm-3, .db-page .px-sm-3 { padding-right: 0.5rem !important; }
   .db-page .pr-sm-4, .db-page .px-sm-4 { padding-right: 1rem !important; }
   .db-page .pr-sm-5, .db-page .px-sm-5 { padding-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .pb-sm-0, .db-page .py-sm-0,
   .db-page .pb-sm-1, .db-page .py-sm-1 { padding-bottom: 0 !important; }
   .db-page .pb-sm-2, .db-page .py-sm-2 { padding-bottom: 0.25rem !important; }
   .db-page .pb-sm-3, .db-page .py-sm-3 { padding-bottom: 0.5rem !important; }
   .db-page .pb-sm-4, .db-page .py-sm-4 { padding-bottom: 1rem !important; }
   .db-page .pb-sm-5, .db-page .py-sm-5 { padding-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .pl-sm-0, .db-page .px-sm-0,
   .db-page .pl-sm-1, .db-page .px-sm-1 { padding-left: 0 !important; }
   .db-page .pl-sm-2, .db-page .px-sm-2 { padding-left: 0.25rem !important; }
   .db-page .pl-sm-3, .db-page .px-sm-3 { padding-left: 0.5rem !important; }
   .db-page .pl-sm-4, .db-page .px-sm-4 { padding-left: 1rem !important; }
   .db-page .pl-sm-5, .db-page .px-sm-5 { padding-left: 1.5rem !important; }
}

/* ## for SM and smaller ## */
@media (max-width: 768px)
{
}


/* ================== *
 * ## Medium (MD) ##
 *
 * @min-width: 768px;
 * @max-width: 992px;
 * ================== */

/* ## for MD and larger ## */
@media (min-width: 768px)
{
   /* ========================= *
    * ## Databrowser Spacing ##
    * ========================= */

   /* ## margin ## */
   .db-page .m-md-0,
   .db-page .m-md-1 { margin: 0 !important; }
   .db-page .m-md-2 { margin: 0.25rem !important; }
   .db-page .m-md-3 { margin: 0.5rem !important; }
   .db-page .m-md-4 { margin: 1rem !important; }
   .db-page .m-md-5 { margin: 1.5rem !important; }

   /* # top # */
   .db-page .mt-md-0, .db-page .my-md-0,
   .db-page .mt-md-1, .db-page .my-md-1 { margin-top: 0 !important; }
   .db-page .mt-md-2, .db-page .my-md-2 { margin-top: 0.25rem !important; }
   .db-page .mt-md-3, .db-page .my-md-3 { margin-top: 0.5rem !important; }
   .db-page .mt-md-4, .db-page .my-md-4 { margin-top: 1rem !important; }
   .db-page .mt-md-5, .db-page .my-md-5 { margin-top: 1.5rem !important; }

   /* # right # */
   .db-page .mr-md-0, .db-page .mx-md-0,
   .db-page .mr-md-1, .db-page .mx-md-1 { margin-right: 0 !important; }
   .db-page .mr-md-2, .db-page .mx-md-2 { margin-right: 0.25rem !important; }
   .db-page .mr-md-3, .db-page .mx-md-3 { margin-right: 0.5rem !important; }
   .db-page .mr-md-4, .db-page .mx-md-4 { margin-right: 1rem !important; }
   .db-page .mr-md-5, .db-page .mx-md-5 { margin-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .mb-md-0, .db-page .my-md-0,
   .db-page .mb-md-1, .db-page .my-md-1 { margin-bottom: 0 !important; }
   .db-page .mb-md-2, .db-page .my-md-2 { margin-bottom: 0.25rem !important; }
   .db-page .mb-md-3, .db-page .my-md-3 { margin-bottom: 0.5rem !important; }
   .db-page .mb-md-4, .db-page .my-md-4 { margin-bottom: 1rem !important; }
   .db-page .mb-md-5, .db-page .my-md-5 { margin-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .ml-md-0, .db-page .mx-md-0,
   .db-page .ml-md-1, .db-page .mx-md-1 { margin-left: 0 !important; }
   .db-page .ml-md-2, .db-page .mx-md-2 { margin-left: 0.25rem !important; }
   .db-page .ml-md-3, .db-page .mx-md-3 { margin-left: 0.5rem !important; }
   .db-page .ml-md-4, .db-page .mx-md-4 { margin-left: 1rem !important; }
   .db-page .ml-md-5, .db-page .mx-md-5 { margin-left: 1.5rem !important; }

   /* ## padding ## */
   .db-page .p-md-0,
   .db-page .p-md-1 { padding: 0 !important; }
   .db-page .p-md-2 { padding: 0.25rem !important; }
   .db-page .p-md-3 { padding: 0.5rem !important; }
   .db-page .p-md-4 { padding: 1rem !important; }
   .db-page .p-md-5 { padding: 1.5rem !important; }

   /* # top # */
   .db-page .pt-md-0, .db-page .py-md-0,
   .db-page .pt-md-1, .db-page .py-md-1 { padding-top: 0 !important; }
   .db-page .pt-md-2, .db-page .py-md-2 { padding-top: 0.25rem !important; }
   .db-page .pt-md-3, .db-page .py-md-3 { padding-top: 0.5rem !important; }
   .db-page .pt-md-4, .db-page .py-md-4 { padding-top: 1rem !important; }
   .db-page .pt-md-5, .db-page .py-md-5 { padding-top: 1.5rem !important; }

   /* # right # */
   .db-page .pr-md-0, .db-page .px-md-0,
   .db-page .pr-md-1, .db-page .px-md-1 { padding-right: 0 !important; }
   .db-page .pr-md-2, .db-page .px-md-2 { padding-right: 0.25rem !important; }
   .db-page .pr-md-3, .db-page .px-md-3 { padding-right: 0.5rem !important; }
   .db-page .pr-md-4, .db-page .px-md-4 { padding-right: 1rem !important; }
   .db-page .pr-md-5, .db-page .px-md-5 { padding-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .pb-md-0, .db-page .py-md-0,
   .db-page .pb-md-1, .db-page .py-md-1 { padding-bottom: 0 !important; }
   .db-page .pb-md-2, .db-page .py-md-2 { padding-bottom: 0.25rem !important; }
   .db-page .pb-md-3, .db-page .py-md-3 { padding-bottom: 0.5rem !important; }
   .db-page .pb-md-4, .db-page .py-md-4 { padding-bottom: 1rem !important; }
   .db-page .pb-md-5, .db-page .py-md-5 { padding-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .pl-md-0, .db-page .px-md-0,
   .db-page .pl-md-1, .db-page .px-md-1 { padding-left: 0 !important; }
   .db-page .pl-md-2, .db-page .px-md-2 { padding-left: 0.25rem !important; }
   .db-page .pl-md-3, .db-page .px-md-3 { padding-left: 0.5rem !important; }
   .db-page .pl-md-4, .db-page .px-md-4 { padding-left: 1rem !important; }
   .db-page .pl-md-5, .db-page .px-md-5 { padding-left: 1.5rem !important; }
}

/* ## for MD and smaller ## */
@media (max-width: 992px)
{
   .db-page .nmt-period-list.nmt-period-upto .role-list .list-container { float: right; }
}


/* =================== *
 * ## Large (LG) ##
 *
 * @min-width: 992px;
 * @max-width: 1200px;
 * =================== */

/* ## for LG and larger ## */
@media (min-width: 992px)
{
   /* ========================= *
    * ## Databrowser Spacing ##
    * ========================= */

   /* ## margin ## */
   .db-page .m-lg-0,
   .db-page .m-lg-1 { margin: 0 !important; }
   .db-page .m-lg-2 { margin: 0.25rem !important; }
   .db-page .m-lg-3 { margin: 0.5rem !important; }
   .db-page .m-lg-4 { margin: 1rem !important; }
   .db-page .m-lg-5 { margin: 1.5rem !important; }

   /* # top # */
   .db-page .mt-lg-0, .db-page .my-lg-0,
   .db-page .mt-lg-1, .db-page .my-lg-1 { margin-top: 0 !important; }
   .db-page .mt-lg-2, .db-page .my-lg-2 { margin-top: 0.25rem !important; }
   .db-page .mt-lg-3, .db-page .my-lg-3 { margin-top: 0.5rem !important; }
   .db-page .mt-lg-4, .db-page .my-lg-4 { margin-top: 1rem !important; }
   .db-page .mt-lg-5, .db-page .my-lg-5 { margin-top: 1.5rem !important; }

   /* # right # */
   .db-page .mr-lg-0, .db-page .mx-lg-0,
   .db-page .mr-lg-1, .db-page .mx-lg-1 { margin-right: 0 !important; }
   .db-page .mr-lg-2, .db-page .mx-lg-2 { margin-right: 0.25rem !important; }
   .db-page .mr-lg-3, .db-page .mx-lg-3 { margin-right: 0.5rem !important; }
   .db-page .mr-lg-4, .db-page .mx-lg-4 { margin-right: 1rem !important; }
   .db-page .mr-lg-5, .db-page .mx-lg-5 { margin-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .mb-lg-0, .db-page .my-lg-0,
   .db-page .mb-lg-1, .db-page .my-lg-1 { margin-bottom: 0 !important; }
   .db-page .mb-lg-2, .db-page .my-lg-2 { margin-bottom: 0.25rem !important; }
   .db-page .mb-lg-3, .db-page .my-lg-3 { margin-bottom: 0.5rem !important; }
   .db-page .mb-lg-4, .db-page .my-lg-4 { margin-bottom: 1rem !important; }
   .db-page .mb-lg-5, .db-page .my-lg-5 { margin-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .ml-lg-0, .db-page .mx-lg-0,
   .db-page .ml-lg-1, .db-page .mx-lg-1 { margin-left: 0 !important; }
   .db-page .ml-lg-2, .db-page .mx-lg-2 { margin-left: 0.25rem !important; }
   .db-page .ml-lg-3, .db-page .mx-lg-3 { margin-left: 0.5rem !important; }
   .db-page .ml-lg-4, .db-page .mx-lg-4 { margin-left: 1rem !important; }
   .db-page .ml-lg-5, .db-page .mx-lg-5 { margin-left: 1.5rem !important; }

   /* ## padding ## */
   .db-page .p-lg-0,
   .db-page .p-lg-1 { padding: 0 !important; }
   .db-page .p-lg-2 { padding: 0.25rem !important; }
   .db-page .p-lg-3 { padding: 0.5rem !important; }
   .db-page .p-lg-4 { padding: 1rem !important; }
   .db-page .p-lg-5 { padding: 1.5rem !important; }

   /* # top # */
   .db-page .pt-lg-0, .db-page .py-lg-0,
   .db-page .pt-lg-1, .db-page .py-lg-1 { padding-top: 0 !important; }
   .db-page .pt-lg-2, .db-page .py-lg-2 { padding-top: 0.25rem !important; }
   .db-page .pt-lg-3, .db-page .py-lg-3 { padding-top: 0.5rem !important; }
   .db-page .pt-lg-4, .db-page .py-lg-4 { padding-top: 1rem !important; }
   .db-page .pt-lg-5, .db-page .py-lg-5 { padding-top: 1.5rem !important; }

   /* # right # */
   .db-page .pr-lg-0, .db-page .px-lg-0,
   .db-page .pr-lg-1, .db-page .px-lg-1 { padding-right: 0 !important; }
   .db-page .pr-lg-2, .db-page .px-lg-2 { padding-right: 0.25rem !important; }
   .db-page .pr-lg-3, .db-page .px-lg-3 { padding-right: 0.5rem !important; }
   .db-page .pr-lg-4, .db-page .px-lg-4 { padding-right: 1rem !important; }
   .db-page .pr-lg-5, .db-page .px-lg-5 { padding-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .pb-lg-0, .db-page .py-lg-0,
   .db-page .pb-lg-1, .db-page .py-lg-1 { padding-bottom: 0 !important; }
   .db-page .pb-lg-2, .db-page .py-lg-2 { padding-bottom: 0.25rem !important; }
   .db-page .pb-lg-3, .db-page .py-lg-3 { padding-bottom: 0.5rem !important; }
   .db-page .pb-lg-4, .db-page .py-lg-4 { padding-bottom: 1rem !important; }
   .db-page .pb-lg-5, .db-page .py-lg-5 { padding-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .pl-lg-0, .db-page .px-lg-0,
   .db-page .pl-lg-1, .db-page .px-lg-1 { padding-left: 0 !important; }
   .db-page .pl-lg-2, .db-page .px-lg-2 { padding-left: 0.25rem !important; }
   .db-page .pl-lg-3, .db-page .px-lg-3 { padding-left: 0.5rem !important; }
   .db-page .pl-lg-4, .db-page .px-lg-4 { padding-left: 1rem !important; }
   .db-page .pl-lg-5, .db-page .px-lg-5 { padding-left: 1.5rem !important; }

   
   .db-page .btn-text {
      font-size: .66rem;
      line-height: 20px;
   }

   .db-page .gui-container .dropdown-component .display-wrapper { height: 20px; }
   .db-page .gui-container .dropdown-component .display-wrapper .list-toggle {
      padding: 3px;
      width: 20px;
   }
   .db-page .gui-container .dropdown-component .role-display,
   .db-page .gui-container .dropdown-component .role-listitems .list-item[data-value],
   .db-page .gui-container .dropdown-component .role-listitems .radio-checkbox .role-label,
   .db-page .gui-container .dropdown-component .role-placeholder {
      font-size: .66rem;
      line-height: 20px;
   }

   .db-page .gui-container .checkbox, .db-page .gui-container .checkbox .role-label,
   .db-page .gui-container .group-checkbox, .db-page .gui-container .group-checkbox .role-label,
   .db-page .gui-container .radio-checkbox, .db-page .gui-container .radio-checkbox .role-label {
      height: 20px;
   }

   .db-page .gui-container .checkbox .role-label,
   .db-page .gui-container .group-checkbox .role-label,
   .db-page .gui-container .radio-checkbox .role-label {
      font-size: .75rem;
      line-height: 20px;
      padding-left: 25px;
   }

   .db-page .gui-container .checkbox .role-button,
   .db-page .gui-container .group-checkbox .role-button,
   .db-page .gui-container .radio-checkbox .role-button {
      padding: 5px;
      width: 20px;
   }

   .db-page .info-table .info-label,
   .db-page .info-table .info-value {
      font-size: 12px;
      line-height: 18px;
   }

   .db-page .nmt-legend-container {
      height: 20px;
      padding-left: 30px;
   }
   .db-page .nmt-legend-container .label {
      font-size: .75rem;
      line-height: 20px;
   }

   .db-page .row-item .item-header:not(.filled-header) {
      font-size: 16px;
      line-height: 16px;
      padding-top: 12px;
   }

   .db-page .search-location-component .search-location-input { height: 20px; }
   .db-page .search-location-component .input-container .role-input { line-height: 20px; }

   .db-page .nmt-position-list .role-listitems,
   .db-page .tracks-time-list .role-listitems { max-height: 100px; }


   /* ============================= *
    * ## Databrowser Map Control ##
    * ============================= */

   .db-page .databrowser-map-controls-container .databrowser-gui-control-button .role-button {
      padding: 8px;
      width: 30px;
   }
}

/* ## for LG and smaller ## */
@media (max-width: 1200px)
{
}


/* ====================== *
 * ## Extra Large (XL) ##
 *
 * @min-width: 1200px;
 * ====================== */

/* ## only on XL ## */
@media (min-width: 1200px)
{
   /* ========================= *
    * ## Databrowser Spacing ##
    * ========================= */

   /* ## margin ## */
   .db-page .m-xl-0,
   .db-page .m-xl-1 { margin: 0 !important; }
   .db-page .m-xl-2 { margin: 0.25rem !important; }
   .db-page .m-xl-3 { margin: 0.5rem !important; }
   .db-page .m-xl-4 { margin: 1rem !important; }
   .db-page .m-xl-5 { margin: 1.5rem !important; }

   /* # top # */
   .db-page .mt-xl-0, .db-page .my-xl-0,
   .db-page .mt-xl-1, .db-page .my-xl-1 { margin-top: 0 !important; }
   .db-page .mt-xl-2, .db-page .my-xl-2 { margin-top: 0.25rem !important; }
   .db-page .mt-xl-3, .db-page .my-xl-3 { margin-top: 0.5rem !important; }
   .db-page .mt-xl-4, .db-page .my-xl-4 { margin-top: 1rem !important; }
   .db-page .mt-xl-5, .db-page .my-xl-5 { margin-top: 1.5rem !important; }

   /* # right # */
   .db-page .mr-xl-0, .db-page .mx-xl-0,
   .db-page .mr-xl-1, .db-page .mx-xl-1 { margin-right: 0 !important; }
   .db-page .mr-xl-2, .db-page .mx-xl-2 { margin-right: 0.25rem !important; }
   .db-page .mr-xl-3, .db-page .mx-xl-3 { margin-right: 0.5rem !important; }
   .db-page .mr-xl-4, .db-page .mx-xl-4 { margin-right: 1rem !important; }
   .db-page .mr-xl-5, .db-page .mx-xl-5 { margin-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .mb-xl-0, .db-page .my-xl-0,
   .db-page .mb-xl-1, .db-page .my-xl-1 { margin-bottom: 0 !important; }
   .db-page .mb-xl-2, .db-page .my-xl-2 { margin-bottom: 0.25rem !important; }
   .db-page .mb-xl-3, .db-page .my-xl-3 { margin-bottom: 0.5rem !important; }
   .db-page .mb-xl-4, .db-page .my-xl-4 { margin-bottom: 1rem !important; }
   .db-page .mb-xl-5, .db-page .my-xl-5 { margin-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .ml-xl-0, .db-page .mx-xl-0,
   .db-page .ml-xl-1, .db-page .mx-xl-1 { margin-left: 0 !important; }
   .db-page .ml-xl-2, .db-page .mx-xl-2 { margin-left: 0.25rem !important; }
   .db-page .ml-xl-3, .db-page .mx-xl-3 { margin-left: 0.5rem !important; }
   .db-page .ml-xl-4, .db-page .mx-xl-4 { margin-left: 1rem !important; }
   .db-page .ml-xl-5, .db-page .mx-xl-5 { margin-left: 1.5rem !important; }

   /* ## padding ## */
   .db-page .p-xl-0,
   .db-page .p-xl-1 { padding: 0 !important; }
   .db-page .p-xl-2 { padding: 0.25rem !important; }
   .db-page .p-xl-3 { padding: 0.5rem !important; }
   .db-page .p-xl-4 { padding: 1rem !important; }
   .db-page .p-xl-5 { padding: 1.5rem !important; }

   /* # top # */
   .db-page .pt-xl-0, .db-page .py-xl-0,
   .db-page .pt-xl-1, .db-page .py-xl-1 { padding-top: 0 !important; }
   .db-page .pt-xl-2, .db-page .py-xl-2 { padding-top: 0.25rem !important; }
   .db-page .pt-xl-3, .db-page .py-xl-3 { padding-top: 0.5rem !important; }
   .db-page .pt-xl-4, .db-page .py-xl-4 { padding-top: 1rem !important; }
   .db-page .pt-xl-5, .db-page .py-xl-5 { padding-top: 1.5rem !important; }

   /* # right # */
   .db-page .pr-xl-0, .db-page .px-xl-0,
   .db-page .pr-xl-1, .db-page .px-xl-1 { padding-right: 0 !important; }
   .db-page .pr-xl-2, .db-page .px-xl-2 { padding-right: 0.25rem !important; }
   .db-page .pr-xl-3, .db-page .px-xl-3 { padding-right: 0.5rem !important; }
   .db-page .pr-xl-4, .db-page .px-xl-4 { padding-right: 1rem !important; }
   .db-page .pr-xl-5, .db-page .px-xl-5 { padding-right: 1.5rem !important; }

   /* # bottom # */
   .db-page .pb-xl-0, .db-page .py-xl-0,
   .db-page .pb-xl-1, .db-page .py-xl-1 { padding-bottom: 0 !important; }
   .db-page .pb-xl-2, .db-page .py-xl-2 { padding-bottom: 0.25rem !important; }
   .db-page .pb-xl-3, .db-page .py-xl-3 { padding-bottom: 0.5rem !important; }
   .db-page .pb-xl-4, .db-page .py-xl-4 { padding-bottom: 1rem !important; }
   .db-page .pb-xl-5, .db-page .py-xl-5 { padding-bottom: 1.5rem !important; }

   /* # left # */
   .db-page .pl-xl-0, .db-page .px-xl-0,
   .db-page .pl-xl-1, .db-page .px-xl-1 { padding-left: 0 !important; }
   .db-page .pl-xl-2, .db-page .px-xl-2 { padding-left: 0.25rem !important; }
   .db-page .pl-xl-3, .db-page .px-xl-3 { padding-left: 0.5rem !important; }
   .db-page .pl-xl-4, .db-page .px-xl-4 { padding-left: 1rem !important; }
   .db-page .pl-xl-5, .db-page .px-xl-5 { padding-left: 1.5rem !important; }


   /* ===================== *
    * ## Databrowser Map ##
    * ===================== */

   .databrowser-container .map-wrapper[map-size="large"] {
      //padding-left: 2rem;
      //padding-right: 2rem;
      width: 100vw;
   }

   .databrowser-container .map-wrapper[map-size="large"] #map {
      box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.45);
   }
}