.desktop { display: block; }
.mobile { display: none; }

@media (max-width: 768px) {
  .desktop { display: none; }
  .mobile { display: block; }
}

body {
    background-color: #eee;
    background-image: url('/areas/public/assets/images/background.svg');
    background-repeat: no-repeat;
    background-position: top left;
}

p .code {
    font-family: var(--bs-font-monospace);
}

 code {
    font-family: var(--bs-font-monospace);
    color: var(--bs-code-color) !important;
    font-weight: 600;
}

.body {
    /*background-image: url('/areas/public/assets/images/background.svg');
    background-repeat: no-repeat;
    background-position: top left;
     background-position: 0 -102px;*/
}

.bg-body-secondary {
    background-color: inherit !important;
}

.site-header {
    background-color: #eee ;
    padding-right: 1em;
    padding-left: 1em;
    color: #fff;
    background-image: url('/areas/public/assets/images/background.svg');
    background-repeat: no-repeat;
    background-position: top left;
    border-bottom: 4px solid #ff972f;
}

.site-footer {
    border-top: 4px solid #ff972f;
}

.carousel-indicators,
.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}

li {
    line-height: 0.9em;
    padding-top: 5px;
}
li small {
    font-size: 0.7em;
    color: #333;
}

.main-news {
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background-repeat: no-repeat;
    border-bottom: 4px solid #019999;
}

.text-#ffffff {
    color: #fff !important;
}

.entertainment {
    background-color: #ccc !important;
    background-image: url('/templates/default/images/entertainment.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 4px solid #019999;
}
blockquote {
    background-color: rgba(255,255,255,0);
}

blockquote h3 {
    font-family: times;
    font-stretch:expanded;
    text-align: center !important;
}

blockquote cite {
    font-style: italic;
    font-weight: 600;
    color: #fff;
    background-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 4px;
        
}
.card {
    background-color: rgba(255,255,255,0) !important;
    border: none;
}

.card-footer {
    background-color: rgba(255,255,255,0) !important;
    border: none;
    border-bottom: 4px solid #ff972f;
}


.list-group {
    background-color: rgba(255,255,255,0) !important;
}
.list-group p {
    font-weight: 100;
}

.list-group a {
     background-color: rgba(255,255,255,0.2) !important;
}

.list-group a:hover {
     background-color: rgba(255,255,255,0.6) !important;
}




.inline-code {
    font-weight: 600;
}

.padding-top-bottom {
    padding-top: 2em;
    padding-bottom: 2em !important;
        
}

.entertainment h2 {
    color: #019999;
}

.blog-header-logo {

    font-size: 2em;
    font-family: 'Nunito', sans-serif;
    color: #000000;

}

.blog-header-logo span {
    font-weight: 700;
    color:#019999;
}

.blog-header-logo h1 {
    font-size: 1.5em;
    color: #000000;

}

.btn {
    font-family: 'barlow', sans-serif;
   /* border-radius: 1em; */
    font-weight: 700;
    font-size: 1em;
    margin-right: 1em;
    background-color: inherit;
}

.btn-group .btn {
    margin-right: 0;
}

.btn-group .btn-success {
    background-color: #198754;
    border: 2px solid #198754;
}

.btn-group .btn-outline-primary {
    color: #000;
    font-weight: 600;
    border: 2px solid #000;
}

.btn-group .btn-outline-primary:hover {
    color: #fff;
    background-color: #000;
    font-weight: 600;
    border: 2px solid #000;
}

.btn-group .btn-error {
    color: #fff;
    font-weight: 500;
    background-color: #ff0000;
}

.btn-link {
    color: #000000;

}

.btn-link:hover, .btn-link:focus, .btn-link:visited, .btn-link:active, .btn-link:checked{
    color: #000000;
    background-color: inherit;

}

.link-danger:hover {
     color: #fff !important;
     background-color: RGBA(176, 42, 55,1) !important;
     border: 2px solid RGBA(176, 42, 55,1) !important;
}


.btn-secondary {
    background-color: #019999;
    border: none;
}

.btn-secondary:hover {
    background-color: #000;
    border: none;
}


main {
    padding: 0px;
}

.btn-warning {
    border: 2px solid #019999 !important;
    background-color: #fff;
    color: #019999;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:visited, .btn-warning:active, .btn-warning:checked {
    background-color: #019999 !important;
    border: 2px solid #019999 !important;
    color: #fff !important;
}

.btn-primary, .btn-primary:visited, .btn-primary:disabled, btn-primary:checked {
    border: 2px solid #000;
    background-color: #000;
    color: #fff;
}
.btn-group .disabled {
    background-color: #333;
    border: 2px solid #333;
}


.btn-danger, .btn-danger:visited, .btn-danger:visited, .btn-danger:disabled, btn-danger:checked, btn-danger:hover {
    border: 2px solid #ff972f;
    background-color: #ff972f; 
    color: #fff; 
} 



.btn-outline-custom {
    color: #019999;
    border: 2px solid #019999;
    background-color: #ffffff; 
}

/* HOVER (not selected yet) */
.btn-outline-custom:hover {
    color: #ffffff;
    background-color: #019999;
    border: 2px solid #019999;
}

.btn-check+.btn:hover {
    border: 2px solid #000000;
    background-color: #000000;
    color: #ffffff;
}
/* CHECKED */
.btn-check:checked + .btn-outline-custom {
    color: #ffffff;
    background-color: #019999;
    border: 2px solid #019999;
}

/* FOCUS (remove glow if you want) */
.btn-outline-custom:focus,
.btn-check:focus + .btn-outline-custom {
    box-shadow: none;
}

.btn-link, .btn-link:visited, .btn-link:disabled  {
    border: 2px solid #eee !important;
    background-color: inherit !important;
    color: #000000 !important;

}

.btn-link:hover, .btn-link:focus,  .btn-link:checked{
    border: 2px solid #000000 !important;
    background-color: #000000 !important;
    color: #fff !important;
}


.btn-outline-#ffffff,.btn-outline-#ffffff:visited,.btn-outline-#ffffff:disabled {
    border: 2px solid #fff !important;
    color: #fff !important;
}

.btn-outline-#ffffff:hover,.btn-outline-#ffffff:focus,.btn-outline-#ffffff:checked {
    border: 2px solid #fff !important;
    background-color: #fff !important;
    color: #000 !important;
}


.btn-primary:hover, .btn-primary:focus,  .btn-primary:checked {
    border: 2px solid #000000 !important;
    background-color: #000000 !important;
    color: #fff !important;
}

.active {
    text-decoration: none;
}

hr {
    border-top: 2px dotted #bbb !important;
}

.border-top {
    border-top: none !important;
    padding-top: 1rem !important;
}

.border-bottom {
    padding-left: 1rem !important;
    border-bottom: none !important;
}


.my-md-5 {
    margin-top: 0rem !important;
    margin-bottom: 3rem !important;
}


h1,h2,h3,h4,h5 {
    font-family: 'barlow', sans-serif;
    color: #000000;
    font-weight: 500;

}

h1 span ,h2 span ,h3 span ,h4 span ,h5 span {
    color: #000 !important;
    font-weight: 700;
}
.text-bg-towyn-primary h1 ,.text-bg-towyn-primary h2 ,.text-bg-towyn-primary h3 ,.text-bg-towyn-primary h4 ,.text-bg-towyn-primary h5  {
    color: #fff !important;
    font-weight: 600 !important;
}


a  {
    color: #000000;
    font-weight: 500;
}

.dropdown-item {
    font-family: 'barlow', sans-serif;
   /* border-radius: 1em; */
    font-weight: 700;
    font-size: 1em;
    background-color: inherit;
    border: 2px solid #fff;
    border-radius: 5px;
    
}

.dropdown-item:active {
    color: #fff;
    background-color: #000 !important;
}

.dropdown-item:selected {
    color: #fff;
    background-color: #000 !important;
}

.dropdown-menu {
    border-radius: 5px;
    border: 0;
    padding: 2px;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
    border-bottom: 4px solid #ff972f;
}

#nocNavbar .nav-link {
    font-weight: 700;
    border: 2px solid #000;
    border-radius: 5px;
}

#nocNavbar .nav-link:hover {
    font-weight: 700;
    border: 2px solid #fff;
    
    
}

#deviceNavOptions {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 1rem;
}

#deviceNavOptions .nav-link {
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 5px;
    margin-right: 5px;
}

#deviceNavOptions .nav-link:hover{
    font-weight: 700;
    color: #fff;
    background-color: #000;
    border: 2px solid #000;
}


.dropdown-item:hover {
    border-radius: 5px;
    border: 2px solid #000;
}


.container .set-center {
    height: 100vh;
}

.row {
    margin: 0;
}

p span {
    font-weight: 600;
}

.custom-popover {
  --bs-popover-bg: #fff;
  --bs-popover-border-color: #999;
  --bs-popover-color: #019999;
  --bs-popover-max-width: 300px;
}

.custom-popover .popover-header {
  background-color: #019999;
  color: #fff;
  font-weight: 600;
}

.custom-popover code {
  background: #333;
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
}

form input[type="text"] {
  /*  text-transform: lowercase; */
}

form fieldset {
    border:1px solid #ccc !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

.input-group-text {
    width:120px;
    text-align: right;
}

table {
   
    border: 2px solid #ccc;
    border-radius: 5px;
}

table th {
    width: auto !important;
}

table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table tr th,
table tr td {
        padding: 5px;
        background-color: #fff;
}

table tr th:first-child,
table tr td:first-child {
  
}
table tr th {
    background-color: #eeeeee !important;
    text-align: left;
}

table th {
    color: #000 !important;
    background-color: #fff !important;
}

/* top-left border-radius */
table tr:first-child th:first-child {
   /* border-top-left-radius: 5px; */
}

/* top-right border-radius */
table tr:first-child th:last-child {
    /* border-top-right-radius: 5px; */
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
    /* border-bottom-left-radius: 5px;*/
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
   /*  border-bottom-right-radius: 5px;*/
}

.row {
    padding-bottom: 0.5em;
}

.big-checkbox {
    width: 1.5rem;
    height: 1.5rem;
    alignment-baseline: middle;
    margin-top: 0;
}