/* Root variables - so we can change theme color fast and easy */
  :root{
    --bs-primary: #3377bb;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-white: #ffffff;
  }

/* Adding smooth scroll */
html {
  scroll-behavior: smooth;
}

a {
  color: var(--bs-primary) ;
}

.main-container {
    height:100%;
    display:flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -webkit-align-content: stretch;
    align-content: stretch;
}

.container {
   padding: 0 3rem 5rem 3rem;
}

.title {
  border-bottom: 2px solid var(--bs-primary);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  padding-left: 1rem;
  margin-left: -1rem;
}

.subtitle {
  border-bottom: 2px solid var(--bs-primary);
  padding-bottom: 1rem;
  margin-bottom: 0;
  padding-left: 1rem;
  margin-left: -1rem;
  padding-right: 1rem;
  margin-right: -1rem;
  font-size: 1.5rem;
}

/*MENU*/

nav	{ 
  /*min-height: 100vh; */
  min-height: calc(100vh - 1px);
  align-items: stretch;
}

nav.pt-2  {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

nav ul li {
  margin: 20px 0;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 1.2rem;
}

li.dm_dmhostcloud_activenav, nav ul li:hover 		{ 
  background-color: var(--bs-white); 
}

li.dm_dmhostcloud_activenav a, nav ul li:hover a	{ 
  color: var(--bs-dark) !important; 
  font-weight: bold;
}

li.dm_dmhostcloud_activenav {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  transition: all 0.5s;
}

.logo {
  padding: 2rem 0 3rem;

}

footer {
  position: relative;
  color: var(--bs-secondary);
  padding: 0 !important;
  margin: 0;
  width: auto;
  color: var(--bs-secondary);
  height: 1px;
  top: -60px;
}

.footdata {
  border-top: 1px solid var(--bs-secondary);
  margin: 0 3rem 0 2rem;
  text-align: right;
  padding-right: 20px;
}

.sheet {
  padding: 0 !important;
  margin: 2rem 0;
}

.colgray {
  background-color: #f1f1f1;
  margin-top: -3rem;
  margin-bottom: -3rem;
  padding-top: 3rem;
}

.submenu {
  margin: 0 -1rem !important;
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
}

.submenu a {
  display: block;
  padding: 1rem 2rem;
  margin: 0 -1rem;
}

.submenu a:hover {
  background-color: #fff;
}

.subm-active {
  color: var(--bs-dark) !important; 
  font-weight: bold;
}

.subm-active a {
  background-color: #fff;
}

.ticketclosed a {
  color: #aaa;
}

/* OVERRITING BOOTSTRAP COLORS TO DM BLUE */

/* General overriting - colors on border, buttons, text and background */
  button:focus					{ border:none !important; box-shadow: none !important; }
  .text-primary,
  h1, h2, h3, h4, h5, h6 			{ color: var(--bs-primary) !important; }
  .bg-primary, .btn-primary 		{ background-color: var(--bs-primary) !important; }
  .btn-primary, .border-primary 	{ border-color: var(--bs-primary) !important; }
/* .card-footer, .card-header		{ background-color: #fff; } */

  input:focus	{ box-shadow: none !important; }

/* Floating form labels padding overriting */
  .form-floating>label			{ padding: 0.5rem 0.75rem; }
  .dm_dmhostcloud_splitinput
  .form-floating>label	{     padding: 0.5rem 1.5rem; }
  .form-floating>.form-control,
  .form-floating>.form-select		{ height: calc(2.5rem + 0px); padding: .75rem .75rem; }

/* Accordion overriting */
  .accordion-button:not(.collapsed)	{ background-color: var(--bs-primary) !important; color: var(--bs-white)}

  .accordion-button::after		{ background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><polygon points="396.6,160 416,180.7 256,352 96,180.7 115.3,160 256,310.5 "/></svg>'); }

  .accordion-button:not(.collapsed)::after { background-image: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="white" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><polygon points="396.6,160 416,180.7 256,352 96,180.7 115.3,160 256,310.5 "/></svg>'); }

  .accordion .card:last-of-type 	{ border-bottom: 0; }

/* card overriting */
  a.card	{ text-decoration: none; color: inherit}

/* Custom CSS */


/* TRANSITIONS ON HOVER ON NEW SERVER PAGE AND ACTION/REQUES BUTTONS ON DETAILS PAGE */
  .dm_dmhostcloud_serverbuttons .card,
  #dm_dmhostcloud_newserverform button			{ box-shadow: none; transition: box-shadow 1s, transform 1s;  }


  #dm_dmhostcloud_newserverform button:active	{ color: #000000; }

  .dm_dmhostcloud_serverbuttons .card:hover,
  #dm_dmhostcloud_newserverform button:hover,
  #dm_dmhostcloud_newserverform button:focus,
  .dm_dmhostcloud_newserverchoosen			 	{ box-shadow: 0 0 10px var(--bs-primary) !important; transform: scale(1.1);  }

  .dm_dmhostcloud_newserverchoosen				{ border: none; transition: box-shadow 1s, transform 1s; }

/* BACKGROUND IMAGE */
  .dm_dmhost_backgroundimage		{ background-image: url("/assets/img/emk_background.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; background-color: rgba(255,255,255,.7); background-blend-mode: color; height: 100%; width: 100%; position: fixed; z-index: 0; top: 0; }

/* USED IN JAVASCRIPT TO HIDE THINGS */
  .dm_dmhostcloud_hideelement		{ display: none; }

/* RED AND GREEN CIRCLES */
  .dm_circular_element 			{ width: 50px; height: 50px; border-radius: 50%; position: relative; overflow: hidden; right: 1rem; }
  .dm_circular_element span 		{ min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* Profile menu in nav */
  .dm_dmhostcloud_profilenav 		
    { 
      bottom: 0; 
    }
  .dm_dmhostcloud_profilenav i
    { 
      padding: 20px 0; 
      font-size: 3rem;
      line-height: 1rem;
    }


/* Single ticket page 'Chat layout from w3schools' */
  .dm_dmhost_chatpage_container, 
  .dm_dmhost_chatpage_form 		{ border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; float:left; width: 70%; }


  .dm_dmhost_chatpage_form 		{ padding: 0px; background: none; border: none;	width: 100%; }

  .dm_dmhost_chatpage_input		{ background: #f1f1f1; width: 100%; padding: 10px; border-radius: 5px; }

  .dm_dmhost_chatpage_darker 		{ border-color: #ccc; background-color: #ddd; }


  .dm_dmhost_chatpage_container 
  img.dm_dmhost_chatpage_right 	{ float: right; margin-left: 20px; margin-right: 0; }

  .dm_dmhost_chatpage_time-right 	{ float: right; color: #aaa; }

  .dm_dmhost_chatpage_time-left 	{ float: left; color: #999; }

  .dm_dmhost_chatpage_container::after 	{ content: ""; clear: both; display: table; }

  .dm_dmhost_chatpage_container img 		{ float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; }

  .dm_dmhost_chatpage_container.dm_dmhost_chatpage_darker 	{ float:right; }

/* Single ticket page 'Chat layout from w3schools' - FINISH*/

  nav ul li						{ cursor: pointer; }

  nav ul li a						{ display: block; }

.icobutton {
  padding-top: 0.3rem;
  padding-right: 0.7rem;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border: 1px solid rgb(248, 169, 50);
}

.msg {
  display: block;
  padding: 1rem 2rem;
  margin: 0 -1rem;	
  color: gray;
}

/* MEDIA QUERY */
/* small screen */
  @media screen and (max-width:500px){
    
    .dm_dmhost_chatpage_container		{ width: 85% !important; }
    
    .dm_dmhostcloud_loginimage.w-25 	{ width: 50% !important; }
    
    .dm_circular_element				{ width: 30px; height: 30px;}
  }

/* medium screen */
  @media screen and (max-width:800px){
    section.w-50				{ width: 90% !important; }
    .dm_dmhost_mobilebtns.w-25	{ width: 49% !important; }
    #dm_dmhost_mobilenavbar		{ min-height: 400px; }
  }