@font-face {
  font-family: century-gothic;
  src: url(../fonts/Century-Gothic-400.ttf);
}

html{
  overflow: hidden;
}
body{
  /*font-family: century-gothic;*/
  background-color: white;
  font-family: 'roboto', sans-serif;
}
.btn-group>.btn {
    border: 1px solid #003771;
    background: #003977;
    border-radius: 4px;
}

.monitorSelection {
  box-shadow: 2px 2px 0px white;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  width: 135px;
  background: white;
  padding: 15px;
  text-align: center;
  user-select: none;
  font-size: 14px;
}

.selection-text-monitor {
  margin-left: 20px;
  margin-bottom: 10px;
  font-style: italic;
  font-size: 14px;
}

.monitorSelection.selected {
  box-shadow: 2px 2px 0px #2266ff;
  border: 1px solid #2266ff;
}

.monitorSelection:hover {
  border: 1px solid #2266ff;
}

.monitorSelection.selected:active {
  box-shadow: 1px 1px 0px #2266ff;
}

.monitorSelection:active {
  box-shadow: 1px 1px 0px #2266ff;
}

.available {
  background-color: #0050a1;
}

.fa-sign-out {
  cursor: pointer;
}

.card.main-page-app {
margin-bottom: 25px;
}

.sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-adjust-section {
  flex: 1;
}

.sidebar-inner .dropdown-menu {
  padding: 0;
  margin: 0;
  transform: none !important;
  margin-top: 36px;
  width: 189px;
}
.sidebar-inner .dropdown-menu a{
  display: block;
  padding: 3px 10px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
}
.sidebar-inner .dropdown-menu a:hover{
  text-decoration: none;
}
.the-left-section{
  padding: 0;
  padding-top: 4px;
  height: 100%;
}
.the-sidebar {
  background-color: #003977;
  padding: 20px 0;
  box-shadow: -12px 0 10px -15px inset rgba(0,0,0,0.2);
  border-right: 1px solid #d9d9d921;
}


.the-sidebar {
  opacity: 0.95;
}

.the-sidebar::after {
  content: "";
  position:absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}



.list-inline li{
  display: inline-block;
}
.the-topbar .list-inline{
  margin-bottom: 0;
}
.sidebar-inner .dropdown-menu li:hover{
  background-color: #f5f5f5;
}
.the-custom-container:after{
  content: "";
  clear: both;
  display: table;
}
.sidebar-inner .btn-group .btn{
  background-color: #00438b;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
  margin-top: 10px;
}
.btn:focus{
  outline: none !important;
  box-shadow: none !important;
}
.card-header{
  background-color: transparent;
}
.card-header h4{
  color: white;
  font-size: 15px;
  font-weight: 500;
  margin-top: 10px;
}
.card-header h4 i{
  margin-right: 4px;
  padding-left: 7px;
}
.card{
  background: transparent;
  border: none;
}
.card-body{


}
.the-sidebar .card-header{
  padding-left: 0;
  padding-right: 0;
}
.the-sidebar .card-header .btn{
  padding-left: 0;
  padding-right: 0;
  display: block;
  width: 100%;
  text-align: left;
}
.the-sidebar .card-header h2 button:after{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f055";
  position: absolute;
  right: 0;
  top: 10px;
  color: #000;
  font-size: 20px;
  cursor: pointer;
}
.the-sidebar .card-header h2 button[aria-expanded="true"]:after{
  content: "\f056";
}
.the-sidebar .card-header h2{
  position: relative;
  padding-right: 40px;
}
.the-topbar{
  background-color: #f5f5f5;
  padding-left: 10px;
  /* color: #fff; */
  padding-right: 10px;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 0px 10px 0 rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
}

body{
  color: #818181;
}
.list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vmuser-list-item {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.list-item-container {
  display: flex;
  align-items: center;
  padding-left: 25px;
}
.list-item-details-container {
  display: flex;
  flex-direction: column;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
}
.list-item-details-container span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-label {
  font-style: italic;
  font-size: 10px;
  opacity: 60%;
}
a{
  color: #818181;
}
a:hover{
  text-decoration: none;
}
.the-right-section{
  padding: 0;
  padding-top: 10px;
  height: calc(100vh - 40px);
  overflow: auto;
}


.full-screen .webconnect-frame {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.the-topbar a{
}
.the-topbar .list-inline a,
.the-topbar .list-inline button{
  margin-left: 5px;
  display: inline-block;
  width: 27px;
  height: 27px;
  border-radius: 100px;
  border: 1px solid #0a0a0a;
  text-align: center;
  padding: 0;
}
.the-topbar .list-inline a.close-button,
.the-topbar .list-inline button.close-button{
  border-color: #1093ff;
}
.fa.fa-window-minimize {
  position: relative;
  top: -4px;
}
.fa.fa-window-close {
  color: red;
}
.the-left-section .the-sidebar{
  height: 100%;
  /* height: 100vh;
  height: calc(100vh - 40px); */
  overflow: auto;
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
}
.the-sidebar .accordion .card-body{
  margin-bottom: 20px;
}
.the-inner-right-section{
  position: relative;
  width: 100%;
  height: 100%;
}
.the-menu-list .computer-list{
  padding: 0;
  list-style: none;
  margin: 0;
  text-align: left;
}
.the-menu-list .computer-list li{
  margin-bottom: 0;
}
.the-menu-list .computer-list li .the-items{
  padding-left: 5px;
  margin-top: 0;
}
/*
.the-menu-list .computer-list li a:before{
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: none;
  border-color: transparent;
  vertical-align: middle;
  margin-right: 6px;
  background: white;
  background: #28a745;
}
*/
/* .the-menu-list .computer-list li.icon a:before{
  content: none;
}
.the-menu-list .computer-list li.away a:before{
  background: #00438b;
}
.the-menu-list .computer-list li.offline a:before{
  background: grey;
}
.the-menu-list .computer-list li.error a:before{
  border-color: #c18585;
  background-color: #e8d4d4;
}
.the-menu-list .computer-list li .the-items li a:before{
  border-color: transparent;
  background-color: transparent;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f111";
  width: auto;
  height: auto;
  border: none;
  font-size: 8px;
  color: #fff;
  margin-right: 5px;
  vertical-align: middle;

} */
.the-menu-list {
  margin-top: 15px;
}

img{
  max-width: 100%;
}
.the-right-bottom-section{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}
.the-right-bottom-section .list-group{
  justify-content: space-around;
  background: #f5f5f5;
  padding: 5px;
}
.the-right-bottom-section .list-group-item{
  border: none;
}
.the-right-bottom-section .list-group .list-group-item{
  background: transparent;
}
#the-menu-trigger{
  width: 100%;
  cursor: pointer;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#the-menu-trigger .line {
  display: block;
  height: 1px;
  background-color: #fff;
  margin: 4px 0 4px 0;
}


.logo-sec {
  text-align: center;
  margin-bottom: 40px;
}
.the-login-section .form-wrap {
  max-width: 100%;
  width: 350px;
  margin: 0 auto;
}
.form-wrap .form-group .input-group-text {
  background-color: #f0f0f0;
  color: #000;
  border-color: #dddddd;
  padding: 6px 10px;
  font-size: 24px;
  width: 50px;
  text-align: center;
}
.form-wrap .form-group .input-group-text i {
  width: 100%;
}
.form-wrap .form-group .form-control {
  border-color: #ddd;
  outline: none !important;
  box-shadow: none !important;
}
.btn-blue {
  background-color: #00438b;
  color: #fff !important;
}
.loading-sec {
  text-align: center;
}
.the-content p {
  color: #000;
}
.loading-sec p {
  font-weight: 500;
  font-size: 18px;
  margin: 0px;
  color: #00438b;
}
.the-login-section .logo-sec{

}
.the-login-section .logo-sec img{
    max-width: 100px;
}
.checkbox input{
  margin-right: 5px;
}
.the-login-section{
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}
.loading-icon{
  font-size: 90px;
}
#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
}
.input-group.password-fields {
    text-align: center;
    justify-content: space-between;
}
input[type=number] {
  height: 40px;
  width: 45px;
  font-size: 25px;
  text-align: center;
  border: 1px solid #bcbcbc;
  border-radius: 5px;
}
input[type=number]:focus{
  outline: none;
  box-shadow: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.the-main-row .the-right-section{
  padding-top: 0;
  -ms-flex: 0 0 100%;
  flex-grow: 1;
  flex-shrink: 1;
  /* max-width: calc(100% - 300px); */

  transition: none;
  /*
  display: grid;
  place-items:center; */


}
.the-main-row .the-left-section {
  width: 275px;
  -ms-flex: 0 0 275px;
  flex: 0 0 275px;
  transition: all 0.3s;
  z-index: 22;
  padding-top: 0;
  margin-left: -300px;
}



.the-main-row .the-left-section {
  position: absolute;
}

.the-main-row.no-overlay .the-left-section {
  /* removes from flexbox */
  position: static;
}

.the-main-row {
  flex-wrap: nowrap;
}


/* .the-main-row.no-overlay .the-right-section {
  flex: none;
  -ms-flex: none;
  flex-grow: 1;
} */
/*
.the-right-section {

  flex: none!important;
  -ms-flex: none!important;
  flex-grow: 1!important;

} */




.menu-open .the-main-row .the-left-section{
  margin-left: 0;
}

.the-left-section {
  height: 100%;
}



.the-menu-list .computer-list li a{
  display: inline-block;
  padding: 7px 10px 7px 33px;
  margin-left: -10px;
  border : 1px solid transparent;
  border-left: 5px solid transparent;
  font-size: 14px;
}
.the-menu-list .computer-list li .the-items li a.active{
  background-color: #007bff;
  }
.the-menu-list .computer-list li.away.active >  a{
  border-left: 5px solid #ffba00;
}
.the-lower-content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.scroll-adjust-section{
  position: relative;
}
.scroll-inner{
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: -15px;
}
.the-lower-content ul{
  padding: 0;
  list-style: none;
  margin-bottom: 0;
}
.the-lower-content ul label{
  margin-bottom: 0;
}
.the-right-bottom-section .list-group .list-group-item ul li a{
  padding-left: 10px;
  padding-right: 10px;
}
h3.card-title {
  color: #00438b;
  font-size: 22px;
}
.the-sidebar .sidebar-inner {
  /* height: calc(100vh - 197px); */
}


body.menu-open.peekaboo {
  /* Hide this menu when the side menu is hidden, even if the internal state of the VM user controller remains the same */
  display: none;
}


.btn-group.the-profile-name{
  width: 86%;
}
.the-lower-content li a{
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  padding: 10px 10px;
  border-left: 5px solid transparent;
  background-color: #00438b;
  color:#fff;
  font-size: 15px;
  font-weight: 500;
  padding-left: 15px;
}
.the-lower-content li a.active{
  color: #000;
  background-color: #e3e3e3;
}
.the-topbar  ul{
  display: inline-block;
  padding: 0;
  margin: 0;
  margin: 0 10px;
}
.the-topbar .list-horizontal li{
  display: inline-flex;
  margin-left: 10px;
  line-height: 1;
}


    .the-topbar {
    background-color: #00438b;

}

div#the-menu-trigger {
}

#the-menu-trigger .line{
  background-color: #fff;
}

.the-title img {
    padding-top: 9px;

}
.the-title{
  display: inline-block;
  font-family: century-gothic;
  padding: 5px;
  margin-left: 10px;
  margin-right:10px;
  vertical-align:top;
  font-weight: 900;
  color: #fff;
  font-size: 22px;
}
i.fa.fa-window-minimize {
    color: white;
    font-size: 13px;
}


i.fa.fa-window-maximize {
    color: white;
    font-size: 13px;
}

.fa.fa-window-close {
    color: white !important;
    font-size: 13px;

}

.the-topbar .list-inline a,
.the-topbar .list-inline button{
border: none;
}

i.fa.fa-user {
    color: #00438b;
}

i.fa.fa-lock {
    color: #00438b;
}


i.fa.fa-times {
    color: white;
}

.other-user a {
    color: #00438b;
    display: grid;
    place-items: center;
    padding-top: 2rem;
    font-weight: 500;

}

.other-user a:hover{
  color: #0059b9;
}

i.fa.fa-spinner.fa-pulse {
    color: #00438b;
}

ul.list-group.list-group-horizontal li a:hover {
    color: #00438b !important;

}

ul.list-horizontal li a {
    color: white;
    padding-right: 3px;
    font-size: 15px;
    opacity: 1;
    transition: .3s ease-out;
}

ul.list-horizontal li a:hover{
  opacity: 0.8;

}

ul.list-group.list-group-horizontal {
    display: none;
}

.dropdown-toggle::after{
  margin-left: 0px !important;
}

ul.dropdown-menu.show {
    margin-top: 50px;
    padding: 20px;
    width: 100%;
}

li.account-title-v2 {
    font-size: 16px;
    padding-bottom: 10px;
    font-weight: 500;
    padding-left: 10px;
    color: #00438b;
}
/*
.card-body img {
    max-width: 40%;
    width: 100%;
}

*/

.the-content-inner.text-dark h3 {
    font-size: 18px;
    font-weight: 500;
    color: #00438b;
}

.modal-body{
  padding: 2rem;
}

li.account-title-v2:hover {
    background-color: white !important;
}


.other-user {
    border-bottom: 1px dashed #00438b;
    padding-bottom: 20px;
    display: block;
    margin: 0 auto;
}


.btn-primary {
    color: #fff;
    background-color: #00438b;
    border-color: #00438b;
}

ul.list-horizontal .fa {
    padding-right: 2px !important;
}





.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.12);
}

.the-lower-content li a.active {
    color: white;
    background-color: #002348;
}

.card-body.card-body-1 a {
    margin-top: 10px;
}

.card-body.card-body-1 {

}

li.the-menu-parent a{
    color: #e9e9e9;
}



.btn-group.the-profile-name button {
    font-size: 14px;
    color: #fff !important;
}

ul#computer-user-lists li a {
    font-size: 14px;
}

.search-field input {
  max-width: 100%;
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: none;
  font-size: 14px;
}


ul.list-horizontal li {
    padding-right: 6px;
}


/*scrollbar */

::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 6px;
  background-color: transparent;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #00438bf0;
  border-radius: 6px;
  position: absolute;
}
.the-left-section ::-webkit-scrollbar-thumb{
  display: none;
}
::-webkit-scrollbar-track{
  width: 0 !important;
}
.the-left-section:hover ::-webkit-scrollbar-thumb{
  display: block;
}
.the-left-section{
  scrollbar-width: none;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #00438bf0;
}
.the-sidebar:hover ::-webkit-scrollbar-thumb{
  display: block;
}
.the-topbar ul{
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  line-height: 1;
}



  .the-title {
    font-size: 20px;
}

  .image-container-logo img{
    display: none !important;
  }

  ul.list-horizontal li{
    padding-right: 8px;
  }
}

.mobile-view-only{
  display: none;
}


.titlebar,
.the-topbar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}



.titlebar-button,
.the-topbar button,
.no-drag {
  -webkit-app-region: no-drag;
}


#mobile-toggle-button{
  display: inline-block;
  vertical-align: top;
  padding: 3px 7px 0;
  color: #fff;
  cursor: pointer;
}



@media(max-width: 1300px){

  .aux-buttons {
    display: none!important;
  }

  .list-open .aux-buttons {
    display: block!important;
    position: fixed;
    top: 45px;
    /* left: 100px; */
    right: 5px;
    width: 200px!important;
    text-align: left!important;
    background: #003977;
    opacity: 0.95;
    padding: 8px 0px!important;
  }

  .list-open .aux-buttons li {
    display: block;
    padding: 8px;
  }


.custom-switch .custom-control-label::before {
      width: 2rem;
}
.custom-switch .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(1rem);
}
}

@media(min-width: 1300px){

  #mobile-toggle-button{
    display: none;
  }

  .custom-switch .custom-control-label::before {

    left: -2.05rem;
}

.custom-switch .custom-control-label::after {

  left: -1.91rem;
}

}
.the-topbar{
  /* transition: all 0.3s; */
}
.full-screen .the-topbar{
  position: absolute;
  width: 100%;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}
.full-screen .the-left-section .the-sidebar,
.full-screen .the-right-section{
  height: 100vh;
}
.nowrap{
  white-space: nowrap;
}
.the-topbar-full-width .the-full-screen-trigger-menu{
  cursor: pointer;
  position: relative;
  z-index: 22;
}
.the-topbar-full-width {
  position: absolute;
  text-align: center;
  background: #00438b;
  width: 45px;
  height: 45px;
  color: #fff;
  border-radius: 100px;
  line-height: 45px;
  z-index: 1;
  cursor: move;
}
.the-topbar-full-width li{
  display: inline-block;
  padding: 0;
  list-style: none;
  margin: 0 1px;
  background: #e9ecef;
  color: #fff;
  margin-top: 10px;
  border-radius: 8px;
}
.the-topbar-full-width ul{
  position: absolute;
  white-space: nowrap;
  padding: 0;
  right: 50px;
  visibility: hidden;
}
.the-topbar-full-width ul a{
  color: #fff;
  display: inline-block;
  padding: 0 12px;
}
.the-topbar-full-width ul i,
.the-topbar-full-width ul i.fa.fa-user{
  color: #00438b;
  font-size: 18px;
}
.the-topbar-full-width li{
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.the-topbar-full-width.sub-menu-open ul{
  visibility: visible;
}
.the-topbar-full-width ul{
  margin-left: 26px;
  top: -10px;
}
.the-topbar-full-width.sub-menu-open li{
  opacity: 1;
  visibility: visible;
    -moz-transform: translate(0 , 0) !important;
  -webkit-transform: translate(0 , 0) !important;
  transform: translate(0 , 0) !important;
}
/*.the-topbar-full-width li:first-child{
  -moz-transform: translate(363px , 0);
  -webkit-transform: translate(363px , 0);
  transform: translate(363px , 0);
}
.the-topbar-full-width li:nth-child(2){
  -moz-transform: translate(225px , 0);;
  -webkit-transform: translate(225px , 0);;
  transform: translate(225px , 0);;
}
.the-topbar-full-width li:nth-child(3){
  -moz-transform: translate(115px , 0);
  -webkit-transform: translate(115px , 0);
  transform: translate(115px , 0);
}
.the-topbar-full-width li:nth-child(4){
  -moz-transform: translate(-14px , 0);
  -webkit-transform: translate(-14px , 0);
  transform: translate(-14px , 0);
}
.the-topbar-full-width li:nth-child(5){
  -moz-transform: translate(-141px , 0);
  -webkit-transform: translate(-141px , 0);
  transform: translate(-141px , 0);
}
.the-topbar-full-width li:nth-child(6){
  -moz-transform: translate(-263px , 0);
  -webkit-transform: translate(-263px , 0);
  transform: translate(-263px , 0);
}
.the-topbar-full-width li:nth-child(7){
  -moz-transform: translate(-371px , 0);
  -webkit-transform: translate(-371px , 0);
  transform: translate(-371px , 0);
}*/
.the-topbar-full-width{
  display: none;
}
.full-screen .the-topbar-full-width{
  display: block;
}
.the-right-section .list-inline {
    padding-right: 10px;
}
.the-topbar-full-width{
  margin-top: 10px;
}
.full-screen .the-topbar-full-width.right-button {
  right: 15px;
  margin-right: 0;
}
.full-screen .the-topbar-full-width.right-button ul{
  position: absolute;
  left: initial;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  padding: 0;
  right: 0;
}
.the-topbar-full-width.right-button ul li{
  -moz-transform: translate(150px, -40px) !important;
  -webkit-transform: translate(150px, -40px) !important;
  transform: translate(150px, -40px) !important;
}
.the-main-content {
  position: relative;
  background: #f8f9fa;
}
.full-screen .the-topbar-full-width.right-button ul li:last-child{
  -moz-transform: translate(0, -40px) !important;
  -webkit-transform: translate(0, -40px) !important;
  transform: translate(0, -40px) !important;
}
.full-screen .the-topbar-full-width.right-button ul li:nth-child(6){
    -moz-transform: translate(0, -40px) !important;
  -webkit-transform: translate(0, -40px) !important;
  transform: translate(0, -40px) !important;
}

.full-screen .the-topbar-full-width.right-button.sub-menu-open ul li{
  -moz-transform: translate(0) !important;
  -webkit-transform: translate(0) !important;
  transform: translate(0) !important;
}
.search-field{
  position: relative;
}
.search-field input+.fa{
  position: absolute;
  right: 13px;
  top: 9px;
  color: #fff;
  opacity: 0.5;
  transition: all 0.3s
}
.search-field input:focus+.fa{
  opacity: 0;
}


.full-screen .the-topbar {
    margin-top: -70px;
}


i.fa.fa-user-circle-o {
    padding-right: 2px;
    color: #fff;
    font-size: 20px;
}

.btn-group.the-profile-name {
    width: 100%;
    position: relative;
}

sidebar-inner button.btn.btn-default.dropdown-toggle {
    width: 49px;
}

.sidebar-inner button.btn.btn-default {
    width: 100%;
}



.sidebar-inner button.btn.btn-default {
    width: 100%;
}

.sidebar-inner button.btn.btn-default.dropdown-toggle {
    width: 36px;
}

ul#the-menu-items li button {
    padding: 0;
    color: #e9e9e9;
    font-size: 13px;
    line-height: 1px;
    transition: all 0.3s linear;
}

ul#the-menu-items li button:hover{
  color: #fff;
}

.the-topbar .the-right-section {
    height: auto;
}

.full-screen .the-topbar {
    margin-top: -70px;
transition: all 1.3s;
}
.tooltip{
  z-index: 103390;
}
#setting-screen{
  text-align: center;
}
.the-inner-right-section #front-screen-inner{
  max-width: 450px;
  margin: auto;
}


h1.welcome-page-title.add-cloud-computer-message.building-process-message {
    font-size: 40px;
    font-weight: 800;
    color: #00438b;
    text-align: center;
    margin-bottom: 0px;
    padding-top: 35px;
}



.card.main-page-app {
transition: all 0.3s linear;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
background-color: #fff;
    padding: 15px;
    border: 1px solid #31313124;
    min-height: 200px;
    padding-top: 25px !important;
}


.image-container-main-page {
    padding-bottom: 10px;
    border-bottom: 1px solid #31313124;
    margin-bottom: 20px;
}

.col.pc-menus-triggers a,
.col.pc-menus-triggers span.pc-name {
    color: #495057;
    font-size: 16px;
    text-align: center;
    padding-top: 15px;
    font-weight: 600;
    padding-bottom: 5px;
    transition: all 0.3s linear;
}


.col.pc-menus-triggers a:hover {
    color: #00438b;

}

p.welcome-message.building-process-message.tutorials-page {
    text-align: center;
    font-weight: 400;
    padding-top: 5px;

    line-height: 2;
    font-size: 18px;

    color: #495057;
}

.card.main-page-app:hover {
    background-color: #efefef;
    box-shadow: none;
}

.the-topbar-full-width.sub-menu-open ul li:hover {
    background-color: white;
}

.btn{
  line-height: 1 !important;
}

.the-topbar-full-width {
    position: absolute;
}

.modal-header {
    background-color: #00438b;
    color: white;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
#mydiv {
  position: absolute;
  z-index: 9;
  text-align: center;
  top: 10px;
  left: 15px;
}

#mydivheader {
  display: inline-block;
  float: left;
  margin-left: 16px;
}
#mydiv ul{
  white-space: nowrap;
}
#mydiv li{
  display: inline-block;
  padding: 0;
  list-style: none;
  margin: 0 1px;
  background: #e9ecef;
  color: #fff;
  margin-top: 15px;
  border-radius: 8px;
}
#mydiv ul{
  padding: 0;
  margin-right: 47px;
  margin-top: -5px;
  margin-left: 70px;
}
#mydiv{
  display: none;
}
.full-screen #mydiv{
  display: block;
}
#mydiv ul{
  display: none;
}
.sub-menu-open #mydiv ul{
  display: block;
}
button.close {
    color: #fff;
    opacity: 1;
}
.the-full-screen-trigger-menu {
    text-align: center;
    background: #00438b;
    width: 45px;
    height: 45px;
    color: #fff;
    border-radius: 100px;
    line-height: 45px;
    z-index: 1;
    cursor: move;
}
.the-topbar .the-right-section {
    height: auto;
    overflow: inherit;
}

.the-main-content {
    position: relative;
    overflow: hidden;
}

.the-topbar .the-right-section {
    height: auto;
    overflow: visible;
}





  .modal-dialog.modal-dialog-centered.modal-xl.modal-for-gifs {
    max-width: 1300px;
    width: 100%;
}

  .modal-dialog.modal-dialog-centered.modal-md.file-transfer-modal {
    max-width: 630px;
    width: 100%;
}



.row.modal-row-files-transfer-section {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

  ul#the-menu-items li button{
    font-size: 15px !important;
  }

  .container.main-page-display {
    max-width: 1250px;
    width: 100%;
}


.top-fields {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* .top-fields::after {
  content: "";

  bottom: -10px;
  height: 10px;
  color: black;

  position: absolute;
} */

button.btn.control-buttons.open-desk {
    color: #fff !important;
    font-size:15px;
    font-weight: 500;
        transition: all 0.3s linear;
    border-radius: 0px;
    padding: 0 0 0 20px !important;
    /* margin: 5px 0 5px 23px !important; */

    margin: 0 0 0 5px !important;

    margin-top: 3px!important;

    border-left: 1px solid #fff;
}

button.btn.control-buttons.open-desk:hover{
  color: #fff !important;
}

  .image-container-logo img {
    max-width: 5%;
    width: 100%;
    text-align: center;
    display: grid;
    padding-bottom: 20px;
    place-items: center;
    margin: 0px auto;
}






input.form-control.form-control-sm.search-main-page {
    border-radius: 100px;
    padding: 20px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 4px 4px -6px black;
}


.card-body.card-body-custom {
    padding: 0 !important;
}

i.fa.fa-eye {
    font-size: 20px;
    font-weight: 500;
        padding-left: 5px;
    padding-right: 5px;
}

i.fa.fa-hand-pointer-o {
  font-size: 20px;
    font-weight: 500;
    padding-left: 10px;
}

i.fa.fa-location-arrow {
    padding-right: 8px;
    color: #00438b;
}

button#dropdownMenu1 {
    box-shadow: 0 4px 4px -6px black;
    white-space: nowrap;
}

i.fa.fa-filter {
    color: #343a40;
    padding-right: 5px;
    font-size: 14px;
}

.container.main-page-display {
    border: 1px solid #3131311f;
    padding: 30px;
    background-color: #fff;
    border-radius: .25rem !important;
    margin-top: 60px;
}

button#dropdownMenu1 {
    font-size: 14px;
}

.row.filter-search-bar {
    padding-bottom: 15px;
}

span.creation-date {
    font-size: 15px;
    color: #6c757d;
    font-weight: 400;
}

input.form-control.form-control-sm.main-page-search {
    box-shadow: 0 4px 4px -6px black;
    -webkit-box-shadow: 0 4px 4px -6px black;
    border-radius: 100px;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
}

i.fa.fa-pencil-square-o {
    padding-right: 5px;

}

i.fa.fa-keyboard-o {
    font-size: 20px;
    font-weight: 500;
    padding-left: 5px;
}

div#inner-image img {
    width: 100%;
}

i.fa.fa-cog {
    margin-right: 4px;
    padding-left: 17px;
}
.the-inner-right-section{
  transition: all 0.3s;
}

.menu-open .the-inner-right-section{
  /*padding-left: 260px;*/
}
i.fa-custom.fa {
    width: 20px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

#the-menu-items{
  margin-left: 0;
  vertical-align: top;
  text-align:right;
  padding-top: 0px;
}

.the-full-screen-trigger-menu img {
    max-width: 25px;
    margin: auto;
    position: relative;
    top: -1px;
    right: 0px;
}

p.sub-title-modal-for-uploading-downloading {
    font-size: 16px;
    font-weight: 500;
    color: #212529;
    padding-bottom: 15px;
    border-bottom: 1px solid #3131311f;
    margin-bottom: 20px;

}

.full-screen-wrapper-container ul li:hover {
    background-color: white !important;
    color: #00438b !important;
}

.full-screen-wrapper-container ul li {
    transition: all 0.3s linear;
    color: #00438b !important;
}

.full-screen-wrapper-container ul li button {
    color: #00438b;
}

.full-screen-wrapper-container ul li button:hover {
    color: #00438b;
}

button.btn.control-buttons.modal-buttons:hover {
  color: #00438b;
}

button.btn.control-buttons.modal-buttons {
  transition: all 0.3s linear;
}

h5.modal-title.inner-modal-dashboard {
    font-size: 18px !important;
}

span.all-download-option a {
    text-decoration: underline;
    padding-left: 3px;
    line-height: 3;
    color: #00438b;
}

input#show-message {
    transform: scale(1.5);
}

span.all-download-option {
    display: block;
    padding-top: 20px;
}


/*

new css dated 4-24-2020


*/

.search-field {
    margin-top: 15px;
}

.the-menu-list {
    margin-top: 0px;
}

ul.list-items li:hover {
    background-color: #002853;
}

.select-darken {
  background-color: #003369;
}

ul.list-items li a {
    display: inline-block !important;
    padding-right: 0px !important;
    font-size: 14px !important;
}

ul.list-items{
  position: relative;
  vertical-align: middle;
}

i.fa.fa-times.signout-button {
    color: #fff;
    transition: all 0.3s linear;
    font-size: 16px;
    opacity: 0.6;
}


i.fa.fa-times.signout-button:hover {
    color: #fff;
    cursor: pointer;
    opacity: 1;

}

.status-bar {
    float: right;
    padding-right: 17px;
}
i.fa.fa-refresh.refresh-button{
  color: #fff;
    transition: all 0.3s linear;
    font-size: 14px;
    opacity: 0.6;


}


li.active-connections {
  padding: 7px;
}

i.fa.fa-refresh.refresh-button:hover{
  color: #fff;
    cursor: pointer;
    opacity: 1;

}



.computers-list {
    border-top: 1px solid #b8b8b838;
    margin-top: 20px;
}

.computers-list {
    border-top: 1px solid #b8b8b817;
    margin-top: 25px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

.the-menu-list {
    margin-bottom: 20px;
    padding-bottom: 12px;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

ul.list-items li {
    margin-left: -20px;
    padding-left: 10px;

}



.status-icon-bg-hover-only {
    padding: 4px;
    transition: all 0.10s linear;
}

.status-icon-bg-hover-only:hover {
    color: #fff !important;
    border-radius: 4px;
}

i.fa.fa-caret-right, i.fa.fa-caret-down {
    color: #fff;
    font-size: 16px;
    margin-left: 8px;
	margin-right: 10px;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s linear;
}

i.fa.fa-caret-right:hover, i.fa.fa-caret-down:hover{
  opacity: 1;
}

.computers-list.application-list {
    margin-top: 10px;
}

i.fa.fa-laptop {
    font-size: 21px;
}

i.fa.fa-spinner.fa-pulse {
    color: #d3d3d3;
    font-size: 16px;
}

.the-menu-parent > .fa{
  width: 30px;
  text-align: center;
  margin: 0 !important;
}
img.top-icon {
    max-width: 20px;
}
/*.the-menu-list .computer-list li.active:before {
    content: "";
    position: absolute;
    top: 0;
    height: 38px;
    left: -16px;
    right: 0;
    background: #002853;
    z-index: -1;
}*/
.the-menu-list .computer-list li.open > a,
.the-menu-list .computer-list li.active > a{
  color: #fff;
}
.the-menu-list .computer-list li{
  position: relative;
  z-index: 1;
}
.the-menu-parent .left-icons{
  position: absolute;
  left: 0;
  top: 7px;
}
.the-menu-parent a.active{
  background-color: #007bff;
}

li.the-menu-parent a {
    transition: all 0.3s linear;
}

.section-after-image{
  padding-top: 15px;
}

button.close:hover {
    color: #d3d3d3;
    opacity: 1 !important;
}

.signout-login {
  cursor: pointer;
}


i.fa.fa-sign-out.refresh-button.status-icon-bg-hover-only {
  color: #fff;
  opacity: .6;
  transition: all 0.3s linear;
  vertical-align: middle;
}
.status-icon-bg-hover-only {
  padding: 4px;
  transition: all 0.10s linear;
}


li.live-help-button {
    background-color: #fff;
    padding: 4px 6px 4px 6px;
    border-radius: 4px;
    margin-right: 15px;
}
button.btn.control-buttons.live-help-button-v2 {
    color: #00438b !important;
    font-weight: 500;
}


.ml-3.choose-camera-option {
    margin-left: 0px !important;
}

.video-cam-icon{
  padding-right: 5px;
}

.camera-selection-option{
  padding-top: 20px;
}

h5.card-title.px-3.py-1.mt-4.connection-title {
    border-top: 1px solid #00438b14;
    padding-top: 25px !important;
}

.connection-icon{
    padding-right: 5px;

}

.custom-control.custom-switch {
    color: #e9e9e9;
    font-size: 15px;
    min-height: 1rem !important;
}


.custom-switch .custom-control-label::before {
    top: 0px;
}

.custom-switch .custom-control-label::after {
    top: 2px;
}


h5.card-title.px-3.py-1.video-audio-block {
    border-top: 1px solid #00438b14;
    padding-top: 25px !important;
    margin-top: 10px;
}


span.vm-name {
    color: #495057;
    font-size: 18px;
    text-align: center;
    padding-top: 15px;
    font-weight: 600;
    padding-bottom: 5px;
    transition: all 0.3s linear;
}

.vm-name-new {
    padding-bottom: 20px;
}

.vm-name-new {
    padding-bottom: 20px;
    border: 1px solid #31313124;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    text-align: center;
    display: inline-block;
}

i.fa.fa-desktop {
    padding-right: 10px;
    vertical-align: middle;
}

.main-wraper-vm-name {
    text-align: center;
    margin-top: -50px;
}

ul.new-connection-list {
    padding-left: 0px;
    list-style-type: none;
    padding-top: 0.75rem;
}

ul.new-connection-list li a {
    color: #fff;
    font-size: 14px;
    padding-bottom: 15px;
}

ul.new-connection-list li {
    border: 1px solid #b8b8b817;
    margin-bottom: 5px !important;
    margin-right: 25px;
}

h4.new-connect-name {
    font-size: 12px;
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 0px;
    color: #bfbfbf;
    font-weight: 500;
}

i.fa.fa-th {
    padding-right: 10px;
}