input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
    line-height: 19px;
}

.sidebar-menu>li {
    margin: 2px 2px !important;
}

.sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion {
    width: 15px;
}


.timeline-body {
    word-wrap: break-word;
}

.timeline-footer {
    display: flex;
    flex-flow: row wrap;
}

.timeline-footer label {
    padding: 0.5rem 0.6rem;
}

textarea {
    max-width: 100%;
    max-height: 100%;
    resize: vertical;
}
/*
th.sorting_disabled {
    display: flex;
    justify-content: center;
}

th.sorting_disabled > label {
    line-height: 1;
    margin: 0;
    padding: 0;
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
}

tr > td > label {
    display: flex;
    justify-content: center;
}*/



.dropzone {
    border: 2px dashed #0087F7
}

@media only screen and (max-width: 768px) {
    .select-user {
        width: 220px
    }
}
@media only screen and (max-width: 768px) {
    .select-contacts-list {
        width: 125px
    }
}

.main-header .navbar {
    margin-left: 200px !important;
}

.navbar .nav>li>a {
    color: black !important;
    font-weight: 300;
}

.navbar {
    padding: 0px !important;
}



/* Start of MySMS.app code*/

.user-panel {
    display: none;
}

/*#company_url {
    display: none;
}*/

p, span, .p, .span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, label, #text, body {
    font-family: Inter, Poppins, sans-serif;
}

.btn.btn-primary {
    background: #117aeb;
    background-color: #117aeb;
    border: none;
    font-family: Inter, Poppins, sans-serif;
}

.btn-danger {
    background: #dc0000;
    background-color: #dc0000;
    border: none;
    font-family: Inter, Poppins, sans-serif;
}

.skin-blue .main-header .navbar {
    background-color: #ecf0f5;
}

body {
    background: #ecf0f5;
}

.main-footer {
    display: none;
}

.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a {
    background: #117aeb;
    border-radius: 5px;
}

body > div > header > nav > div > ul > li.dropdown.user.user-menu > a > img {
    display: none;
}

body > div > header > nav > div > ul > li.dropdown.user.user-menu > a > span {
    color: black;
}

body > div > header > nav > div > ul > li:nth-child(2) > a > i {
    color: black;
}



@media (min-width:768px) {
    .content-wrapper {
    margin-left: 200px !important;
    padding: 10px !important;
}
}

.main-sidebar, .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background-color: #ecf0f5;
}

.skin-blue .sidebar a {
    color: black;
}

.main-sidebar {
    padding-top: 0px !important;
    z-index: 9999 !important;
    width: 200px !important;
    border-right: 1px solid lightgrey;
}

.logo-container {
    display: flex;
    justify-content: center;
    min-width: 100% !important;
    min-height: 80px;
}

.logo-container .logo {
    display: flex;
    justify-content: center;
}

.skin-blue .sidebar-menu>li>a {
    border: none;
}

.skin-blue .main-header .logo {
    background-color: #ecf0f5;
    padding-top: 10px;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: black;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
    border-radius: 10px;
}

.skin-blue .main-header .navbar .nav>li>a {
    border-radius: 10px !important;
}

.sidebar-toggle {
    display: none !important;
}

#application-title {
    color: black;
    font-family: Poppins, Inter, sans-serif !important;
}

.box.box-primary {
    border-top-color: #117aeb;
    border-top: 0px;
}

.logo:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.logo:hover > #application-title {
    color: white;
}


a {
    color: #117aeb;
}

/*Dashboard*/

.small-box {
    border-radius: 5px;
    background: rgb(114,182,255);
    background: linear-gradient(0deg, rgba(114,182,255,1) 0%, rgba(200,230,255,1) 100%) !important;
    padding: 15px 0px !important;
}

#timeIntervalInput {
    border-radius: 5px;
}

.small-box h3, .small-box p {
    color: #117aeb;
}

.small-box p {
    font-weight: 300;
}

.user-name {
    font-weight: 300;
}

.instructions > p {
    font-weight: 300;
}


.small-box:hover {
  background: #117aeb !important; /* Change background on hover */
}

.small-box:hover h3,
.small-box:hover p {
  color: #ffffff; /* Change text color on hover */
}

/* (Optional, but often good practice)
   Add a transition for a smooth color change. */
.small-box,
.small-box h3,
.small-box p{
  transition: background-color 0.3s ease, color 0.3s ease;
}



#Dash-Messages {
    display: flex;
    margin-bottom: 10px;
}

#Dash-Messages > h3 {
    width: -webkit-fill-available;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

#Dash-Messages > #add-device {
    margin-bottom: 10px;
}

.main-header {
    max-height: 55px !important;
}




body > div > header > a, .logo {
    height: 100%;
    padding: 10px 0px;
    font-size: 20px;
    font-weight: 300;
    min-width: 100%;
}

.logo-lg > img, .logo .logo-lg img {
    max-height: 80px !important;
    border-radius: 10px !important;
}

@media (min-width: 768px) {
.col-lg-3 {
    width: 25% !important;
}
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.small-box .icon {
    top: 5px !important;
}




/* Icons on dashboard*/
.ion, .ionicons, .ion-ios-add:before, .ion-ios-add-circle:before, .ion-ios-add-circle-outline:before, .ion-ios-airplane:before, .ion-ios-alarm:before, .ion-ios-albums:before, .ion-ios-alert:before, .ion-ios-american-football:before, .ion-ios-analytics:before, .ion-ios-aperture:before, .ion-ios-apps:before, .ion-ios-appstore:before, .ion-ios-archive:before, .ion-ios-arrow-back:before, .ion-ios-arrow-down:before, .ion-ios-arrow-dropdown:before, .ion-ios-arrow-dropdown-circle:before, .ion-ios-arrow-dropleft:before, .ion-ios-arrow-dropleft-circle:before, .ion-ios-arrow-dropright:before, .ion-ios-arrow-dropright-circle:before, .ion-ios-arrow-dropup:before, .ion-ios-arrow-dropup-circle:before, .ion-ios-arrow-forward:before, .ion-ios-arrow-round-back:before, .ion-ios-arrow-round-down:before, .ion-ios-arrow-round-forward:before, .ion-ios-arrow-round-up:before, .ion-ios-arrow-up:before, .ion-ios-at:before, .ion-ios-attach:before, .ion-ios-backspace:before, .ion-ios-barcode:before, .ion-ios-baseball:before, .ion-ios-basket:before, .ion-ios-basketball:before, .ion-ios-battery-charging:before, .ion-ios-battery-dead:before, .ion-ios-battery-full:before, .ion-ios-beaker:before, .ion-ios-bed:before, .ion-ios-beer:before, .ion-ios-bicycle:before, .ion-ios-bluetooth:before, .ion-ios-boat:before, .ion-ios-body:before, .ion-ios-bonfire:before, .ion-ios-book:before, .ion-ios-bookmark:before, .ion-ios-bookmarks:before, .ion-ios-bowtie:before, .ion-ios-briefcase:before, .ion-ios-browsers:before, .ion-ios-brush:before, .ion-ios-bug:before, .ion-ios-build:before, .ion-ios-bulb:before, .ion-ios-bus:before, .ion-ios-business:before, .ion-ios-cafe:before, .ion-ios-calculator:before, .ion-ios-calendar:before, .ion-ios-call:before, .ion-ios-camera:before, .ion-ios-car:before, .ion-ios-card:before, .ion-ios-cart:before, .ion-ios-cash:before, .ion-ios-cellular:before, .ion-ios-chatboxes:before, .ion-ios-chatbubbles:before, .ion-ios-checkbox:before, .ion-ios-checkbox-outline:before, .ion-ios-checkmark:before, .ion-ios-checkmark-circle:before, .ion-ios-checkmark-circle-outline:before, .ion-ios-clipboard:before, .ion-ios-clock:before, .ion-ios-close:before, .ion-ios-close-circle:before, .ion-ios-close-circle-outline:before, .ion-ios-cloud:before, .ion-ios-cloud-circle:before, .ion-ios-cloud-done:before, .ion-ios-cloud-download:before, .ion-ios-cloud-outline:before, .ion-ios-cloud-upload:before, .ion-ios-cloudy:before, .ion-ios-cloudy-night:before, .ion-ios-code:before, .ion-ios-code-download:before, .ion-ios-code-working:before, .ion-ios-cog:before, .ion-ios-color-fill:before, .ion-ios-color-filter:before, .ion-ios-color-palette:before, .ion-ios-color-wand:before, .ion-ios-compass:before, .ion-ios-construct:before, .ion-ios-contact:before, .ion-ios-contacts:before, .ion-ios-contract:before, .ion-ios-contrast:before, .ion-ios-copy:before, .ion-ios-create:before, .ion-ios-crop:before, .ion-ios-cube:before, .ion-ios-cut:before, .ion-ios-desktop:before, .ion-ios-disc:before, .ion-ios-document:before, .ion-ios-done-all:before, .ion-ios-download:before, .ion-ios-easel:before, .ion-ios-egg:before, .ion-ios-exit:before, .ion-ios-expand:before, .ion-ios-eye:before, .ion-ios-eye-off:before, .ion-ios-fastforward:before, .ion-ios-female:before, .ion-ios-filing:before, .ion-ios-film:before, .ion-ios-finger-print:before, .ion-ios-fitness:before, .ion-ios-flag:before, .ion-ios-flame:before, .ion-ios-flash:before, .ion-ios-flash-off:before, .ion-ios-flashlight:before, .ion-ios-flask:before, .ion-ios-flower:before, .ion-ios-folder:before, .ion-ios-folder-open:before, .ion-ios-football:before, .ion-ios-funnel:before, .ion-ios-gift:before, .ion-ios-git-branch:before, .ion-ios-git-commit:before, .ion-ios-git-compare:before, .ion-ios-git-merge:before, .ion-ios-git-network:before, .ion-ios-git-pull-request:before, .ion-ios-glasses:before, .ion-ios-globe:before, .ion-ios-grid:before, .ion-ios-hammer:before, .ion-ios-hand:before, .ion-ios-happy:before, .ion-ios-headset:before, .ion-ios-heart:before, .ion-ios-heart-dislike:before, .ion-ios-heart-empty:before, .ion-ios-heart-half:before, .ion-ios-help:before, .ion-ios-help-buoy:before, .ion-ios-help-circle:before, .ion-ios-help-circle-outline:before, .ion-ios-home:before, .ion-ios-hourglass:before, .ion-ios-ice-cream:before, .ion-ios-image:before, .ion-ios-images:before, .ion-ios-infinite:before, .ion-ios-information:before, .ion-ios-information-circle:before, .ion-ios-information-circle-outline:before, .ion-ios-jet:before, .ion-ios-journal:before, .ion-ios-key:before, .ion-ios-keypad:before, .ion-ios-laptop:before, .ion-ios-leaf:before, .ion-ios-link:before, .ion-ios-list:before, .ion-ios-list-box:before, .ion-ios-locate:before, .ion-ios-lock:before, .ion-ios-log-in:before, .ion-ios-log-out:before, .ion-ios-magnet:before, .ion-ios-mail:before, .ion-ios-mail-open:before, .ion-ios-mail-unread:before, .ion-ios-male:before, .ion-ios-man:before, .ion-ios-map:before, .ion-ios-medal:before, .ion-ios-medical:before, .ion-ios-medkit:before, .ion-ios-megaphone:before, .ion-ios-menu:before, .ion-ios-mic:before, .ion-ios-mic-off:before, .ion-ios-microphone:before, .ion-ios-moon:before, .ion-ios-more:before, .ion-ios-move:before, .ion-ios-musical-note:before, .ion-ios-musical-notes:before, .ion-ios-navigate:before, .ion-ios-notifications:before, .ion-ios-notifications-off:before, .ion-ios-notifications-outline:before, .ion-ios-nuclear:before, .ion-ios-nutrition:before, .ion-ios-open:before, .ion-ios-options:before, .ion-ios-outlet:before, .ion-ios-paper:before, .ion-ios-paper-plane:before, .ion-ios-partly-sunny:before, .ion-ios-pause:before, .ion-ios-paw:before, .ion-ios-people:before, .ion-ios-person:before, .ion-ios-person-add:before, .ion-ios-phone-landscape:before, .ion-ios-phone-portrait:before, .ion-ios-photos:before, .ion-ios-pie:before, .ion-ios-pin:before, .ion-ios-pint:before, .ion-ios-pizza:before, .ion-ios-planet:before, .ion-ios-play:before, .ion-ios-play-circle:before, .ion-ios-podium:before, .ion-ios-power:before, .ion-ios-pricetag:before, .ion-ios-pricetags:before, .ion-ios-print:before, .ion-ios-pulse:before, .ion-ios-qr-scanner:before, .ion-ios-quote:before, .ion-ios-radio:before, .ion-ios-radio-button-off:before, .ion-ios-radio-button-on:before, .ion-ios-rainy:before, .ion-ios-recording:before, .ion-ios-redo:before, .ion-ios-refresh:before, .ion-ios-refresh-circle:before, .ion-ios-remove:before, .ion-ios-remove-circle:before, .ion-ios-remove-circle-outline:before, .ion-ios-reorder:before, .ion-ios-repeat:before, .ion-ios-resize:before, .ion-ios-restaurant:before, .ion-ios-return-left:before, .ion-ios-return-right:before, .ion-ios-reverse-camera:before, .ion-ios-rewind:before, .ion-ios-ribbon:before, .ion-ios-rocket:before, .ion-ios-rose:before, .ion-ios-sad:before, .ion-ios-save:before, .ion-ios-school:before, .ion-ios-search:before, .ion-ios-send:before, .ion-ios-settings:before, .ion-ios-share:before, .ion-ios-share-alt:before, .ion-ios-shirt:before, .ion-ios-shuffle:before, .ion-ios-skip-backward:before, .ion-ios-skip-forward:before, .ion-ios-snow:before, .ion-ios-speedometer:before, .ion-ios-square:before, .ion-ios-square-outline:before, .ion-ios-star:before, .ion-ios-star-half:before, .ion-ios-star-outline:before, .ion-ios-stats:before, .ion-ios-stopwatch:before, .ion-ios-subway:before, .ion-ios-sunny:before, .ion-ios-swap:before, .ion-ios-switch:before, .ion-ios-sync:before, .ion-ios-tablet-landscape:before, .ion-ios-tablet-portrait:before, .ion-ios-tennisball:before, .ion-ios-text:before, .ion-ios-thermometer:before, .ion-ios-thumbs-down:before, .ion-ios-thumbs-up:before, .ion-ios-thunderstorm:before, .ion-ios-time:before, .ion-ios-timer:before, .ion-ios-today:before, .ion-ios-train:before, .ion-ios-transgender:before, .ion-ios-trash:before, .ion-ios-trending-down:before, .ion-ios-trending-up:before, .ion-ios-trophy:before, .ion-ios-tv:before, .ion-ios-umbrella:before, .ion-ios-undo:before, .ion-ios-unlock:before, .ion-ios-videocam:before, .ion-ios-volume-high:before, .ion-ios-volume-low:before, .ion-ios-volume-mute:before, .ion-ios-volume-off:before, .ion-ios-walk:before, .ion-ios-wallet:before, .ion-ios-warning:before, .ion-ios-watch:before, .ion-ios-water:before, .ion-ios-wifi:before, .ion-ios-wine:before, .ion-ios-woman:before, .ion-logo-android:before, .ion-logo-angular:before, .ion-logo-apple:before, .ion-logo-bitbucket:before, .ion-logo-bitcoin:before, .ion-logo-buffer:before, .ion-logo-chrome:before, .ion-logo-closed-captioning:before, .ion-logo-codepen:before, .ion-logo-css3:before, .ion-logo-designernews:before, .ion-logo-dribbble:before, .ion-logo-dropbox:before, .ion-logo-euro:before, .ion-logo-facebook:before, .ion-logo-flickr:before, .ion-logo-foursquare:before, .ion-logo-freebsd-devil:before, .ion-logo-game-controller-a:before, .ion-logo-game-controller-b:before, .ion-logo-github:before, .ion-logo-google:before, .ion-logo-googleplus:before, .ion-logo-hackernews:before, .ion-logo-html5:before, .ion-logo-instagram:before, .ion-logo-ionic:before, .ion-logo-ionitron:before, .ion-logo-javascript:before, .ion-logo-linkedin:before, .ion-logo-markdown:before, .ion-logo-model-s:before, .ion-logo-no-smoking:before, .ion-logo-nodejs:before, .ion-logo-npm:before, .ion-logo-octocat:before, .ion-logo-pinterest:before, .ion-logo-playstation:before, .ion-logo-polymer:before, .ion-logo-python:before, .ion-logo-reddit:before, .ion-logo-rss:before, .ion-logo-sass:before, .ion-logo-skype:before, .ion-logo-slack:before, .ion-logo-snapchat:before, .ion-logo-steam:before, .ion-logo-tumblr:before, .ion-logo-tux:before, .ion-logo-twitch:before, .ion-logo-twitter:before, .ion-logo-usd:before, .ion-logo-vimeo:before, .ion-logo-vk:before, .ion-logo-whatsapp:before, .ion-logo-windows:before, .ion-logo-wordpress:before, .ion-logo-xbox:before, .ion-logo-xing:before, .ion-logo-yahoo:before, .ion-logo-yen:before, .ion-logo-youtube:before, .ion-md-add:before, .ion-md-add-circle:before, .ion-md-add-circle-outline:before, .ion-md-airplane:before, .ion-md-alarm:before, .ion-md-albums:before, .ion-md-alert:before, .ion-md-american-football:before, .ion-md-analytics:before, .ion-md-aperture:before, .ion-md-apps:before, .ion-md-appstore:before, .ion-md-archive:before, .ion-md-arrow-back:before, .ion-md-arrow-down:before, .ion-md-arrow-dropdown:before, .ion-md-arrow-dropdown-circle:before, .ion-md-arrow-dropleft:before, .ion-md-arrow-dropleft-circle:before, .ion-md-arrow-dropright:before, .ion-md-arrow-dropright-circle:before, .ion-md-arrow-dropup:before, .ion-md-arrow-dropup-circle:before, .ion-md-arrow-forward:before, .ion-md-arrow-round-back:before, .ion-md-arrow-round-down:before, .ion-md-arrow-round-forward:before, .ion-md-arrow-round-up:before, .ion-md-arrow-up:before, .ion-md-at:before, .ion-md-attach:before, .ion-md-backspace:before, .ion-md-barcode:before, .ion-md-baseball:before, .ion-md-basket:before, .ion-md-basketball:before, .ion-md-battery-charging:before, .ion-md-battery-dead:before, .ion-md-battery-full:before, .ion-md-beaker:before, .ion-md-bed:before, .ion-md-beer:before, .ion-md-bicycle:before, .ion-md-bluetooth:before, .ion-md-boat:before, .ion-md-body:before, .ion-md-bonfire:before, .ion-md-book:before, .ion-md-bookmark:before, .ion-md-bookmarks:before, .ion-md-bowtie:before, .ion-md-briefcase:before, .ion-md-browsers:before, .ion-md-brush:before, .ion-md-bug:before, .ion-md-build:before, .ion-md-bulb:before, .ion-md-bus:before, .ion-md-business:before, .ion-md-cafe:before, .ion-md-calculator:before, .ion-md-calendar:before, .ion-md-call:before, .ion-md-camera:before, .ion-md-car:before, .ion-md-card:before, .ion-md-cart:before, .ion-md-cash:before, .ion-md-cellular:before, .ion-md-chatboxes:before, .ion-md-chatbubbles:before, .ion-md-checkbox:before, .ion-md-checkbox-outline:before, .ion-md-checkmark:before, .ion-md-checkmark-circle:before, .ion-md-checkmark-circle-outline:before, .ion-md-clipboard:before, .ion-md-clock:before, .ion-md-close:before, .ion-md-close-circle:before, .ion-md-close-circle-outline:before, .ion-md-cloud:before, .ion-md-cloud-circle:before, .ion-md-cloud-done:before, .ion-md-cloud-download:before, .ion-md-cloud-outline:before, .ion-md-cloud-upload:before, .ion-md-cloudy:before, .ion-md-cloudy-night:before, .ion-md-code:before, .ion-md-code-download:before, .ion-md-code-working:before, .ion-md-cog:before, .ion-md-color-fill:before, .ion-md-color-filter:before, .ion-md-color-palette:before, .ion-md-color-wand:before, .ion-md-compass:before, .ion-md-construct:before, .ion-md-contact:before, .ion-md-contacts:before, .ion-md-contract:before, .ion-md-contrast:before, .ion-md-copy:before, .ion-md-create:before, .ion-md-crop:before, .ion-md-cube:before, .ion-md-cut:before, .ion-md-desktop:before, .ion-md-disc:before, .ion-md-document:before, .ion-md-done-all:before, .ion-md-download:before, .ion-md-easel:before, .ion-md-egg:before, .ion-md-exit:before, .ion-md-expand:before, .ion-md-eye:before, .ion-md-eye-off:before, .ion-md-fastforward:before, .ion-md-female:before, .ion-md-filing:before, .ion-md-film:before, .ion-md-finger-print:before, .ion-md-fitness:before, .ion-md-flag:before, .ion-md-flame:before, .ion-md-flash:before, .ion-md-flash-off:before, .ion-md-flashlight:before, .ion-md-flask:before, .ion-md-flower:before, .ion-md-folder:before, .ion-md-folder-open:before, .ion-md-football:before, .ion-md-funnel:before, .ion-md-gift:before, .ion-md-git-branch:before, .ion-md-git-commit:before, .ion-md-git-compare:before, .ion-md-git-merge:before, .ion-md-git-network:before, .ion-md-git-pull-request:before, .ion-md-glasses:before, .ion-md-globe:before, .ion-md-grid:before, .ion-md-hammer:before, .ion-md-hand:before, .ion-md-happy:before, .ion-md-headset:before, .ion-md-heart:before, .ion-md-heart-dislike:before, .ion-md-heart-empty:before, .ion-md-heart-half:before, .ion-md-help:before, .ion-md-help-buoy:before, .ion-md-help-circle:before, .ion-md-help-circle-outline:before, .ion-md-home:before, .ion-md-hourglass:before, .ion-md-ice-cream:before, .ion-md-image:before, .ion-md-images:before, .ion-md-infinite:before, .ion-md-information:before, .ion-md-information-circle:before, .ion-md-information-circle-outline:before, .ion-md-jet:before, .ion-md-journal:before, .ion-md-key:before, .ion-md-keypad:before, .ion-md-laptop:before, .ion-md-leaf:before, .ion-md-link:before, .ion-md-list:before, .ion-md-list-box:before, .ion-md-locate:before, .ion-md-lock:before, .ion-md-log-in:before, .ion-md-log-out:before, .ion-md-magnet:before, .ion-md-mail:before, .ion-md-mail-open:before, .ion-md-mail-unread:before, .ion-md-male:before, .ion-md-man:before, .ion-md-map:before, .ion-md-medal:before, .ion-md-medical:before, .ion-md-medkit:before, .ion-md-megaphone:before, .ion-md-menu:before, .ion-md-mic:before, .ion-md-mic-off:before, .ion-md-microphone:before, .ion-md-moon:before, .ion-md-more:before, .ion-md-move:before, .ion-md-musical-note:before, .ion-md-musical-notes:before, .ion-md-navigate:before, .ion-md-notifications:before, .ion-md-notifications-off:before, .ion-md-notifications-outline:before, .ion-md-nuclear:before, .ion-md-nutrition:before, .ion-md-open:before, .ion-md-options:before, .ion-md-outlet:before, .ion-md-paper:before, .ion-md-paper-plane:before, .ion-md-partly-sunny:before, .ion-md-pause:before, .ion-md-paw:before, .ion-md-people:before, .ion-md-person:before, .ion-md-person-add:before, .ion-md-phone-landscape:before, .ion-md-phone-portrait:before, .ion-md-photos:before, .ion-md-pie:before, .ion-md-pin:before, .ion-md-pint:before, .ion-md-pizza:before, .ion-md-planet:before, .ion-md-play:before, .ion-md-play-circle:before, .ion-md-podium:before, .ion-md-power:before, .ion-md-pricetag:before, .ion-md-pricetags:before, .ion-md-print:before, .ion-md-pulse:before, .ion-md-qr-scanner:before, .ion-md-quote:before, .ion-md-radio:before, .ion-md-radio-button-off:before, .ion-md-radio-button-on:before, .ion-md-rainy:before, .ion-md-recording:before, .ion-md-redo:before, .ion-md-refresh:before, .ion-md-refresh-circle:before, .ion-md-remove:before, .ion-md-remove-circle:before, .ion-md-remove-circle-outline:before, .ion-md-reorder:before, .ion-md-repeat:before, .ion-md-resize:before, .ion-md-restaurant:before, .ion-md-return-left:before, .ion-md-return-right:before, .ion-md-reverse-camera:before, .ion-md-rewind:before, .ion-md-ribbon:before, .ion-md-rocket:before, .ion-md-rose:before, .ion-md-sad:before, .ion-md-save:before, .ion-md-school:before, .ion-md-search:before, .ion-md-send:before, .ion-md-settings:before, .ion-md-share:before, .ion-md-share-alt:before, .ion-md-shirt:before, .ion-md-shuffle:before, .ion-md-skip-backward:before, .ion-md-skip-forward:before, .ion-md-snow:before, .ion-md-speedometer:before, .ion-md-square:before, .ion-md-square-outline:before, .ion-md-star:before, .ion-md-star-half:before, .ion-md-star-outline:before, .ion-md-stats:before, .ion-md-stopwatch:before, .ion-md-subway:before, .ion-md-sunny:before, .ion-md-swap:before, .ion-md-switch:before, .ion-md-sync:before, .ion-md-tablet-landscape:before, .ion-md-tablet-portrait:before, .ion-md-tennisball:before, .ion-md-text:before, .ion-md-thermometer:before, .ion-md-thumbs-down:before, .ion-md-thumbs-up:before, .ion-md-thunderstorm:before, .ion-md-time:before, .ion-md-timer:before, .ion-md-today:before, .ion-md-train:before, .ion-md-transgender:before, .ion-md-trash:before, .ion-md-trending-down:before, .ion-md-trending-up:before, .ion-md-trophy:before, .ion-md-tv:before, .ion-md-umbrella:before, .ion-md-undo:before, .ion-md-unlock:before, .ion-md-videocam:before, .ion-md-volume-high:before, .ion-md-volume-low:before, .ion-md-volume-mute:before, .ion-md-volume-off:before, .ion-md-walk:before, .ion-md-wallet:before, .ion-md-warning:before, .ion-md-watch:before, .ion-md-water:before, .ion-md-wifi:before, .ion-md-wine:before, .ion-md-woman:before, body > div > div > section.content > div:nth-child(3) > a > div > div > div.icon > i, body > div > div > section.content > div:nth-child(4) > a:nth-child(2) > div > div > div.icon > i {
    color: #ffffff80;
}


.h3-center {
    text-align: center;
}

.Dashboard-h1 {
    margin-top: 0px;
    font-weight: 300 !important;
}

@media (max-width: 768px) {
    .Dashboard-h1 {
        font-size: 20px;
    }
    #timeIntervalInput {
        margin-top: 0px !important;
    }
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #117aeb !important;
    background-color: #117aeb !important;
}

.notification-setup {
    text-align: center;
    padding: 4px;
    border-radius: 3px;
    color: white;
    background: #fc9905;
    width: 80%;
    margin: auto;
}

#add-device-dash {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
/*    min-height: 150px !important;*/
}


.content-header>h1 {
    font-weight: 300 !important;
}



/* End of Dashboard*/




.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #117aeb80 !important;
}

.callout.callout-info {
    border-color: #117aeb;
}



@media (min-width: 768px) {
.additional-content-container {
            display: grid;            
            grid-template-columns: 1fr 1fr;  
            gap: 20px;             
            padding-left: 15px;
            padding-right: 15px;
        }
        .additional-content-container1 {
            display: grid;            
            grid-template-columns: 1fr 1fr;  
            gap: 20px;             
            padding-left: 15px;
            padding-right: 15px;
        }
        
        .additional-content-container2 {
            display: grid;            
            grid-template-columns: 1fr 1fr 1fr;  
            gap: 20px;             
            padding-left: 15px;
            padding-right: 15px;
        }
        
        .additional-content-container5 {
            display: grid;            
            grid-template-columns: 1fr 2fr;  
            gap: 20px;             
            padding-left: 0px;
            padding-right: 0px;
            border-bottom: 2px dashed grey;
        }

        .column1, .column2 {
            display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        /*text-align: center;*/
        }
        
        .column3, .column4 {
            display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        }
        
        .column5 {
             display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        }
        
        h3, .h3 {
            margin-top: 0px;
        }
}

@media (max-width: 767px) {
.additional-content-container {
            gap: 10px;             
        }
        
        .additional-content-container1 {
            margin-bottom: 30px;   
        }

        .column1, .column2 {
            /*border: 1px solid #ccc;  *//* Optional: For visual clarity */
            padding: 10px;
        }
}



.addon-h3, .addon-h4 {
    font-weight: 300;
}


.dashboard-vid-container {
    width: 100% !important;
}






/*Useful links*/

/* --- Base Styles --- */

.useful-links-list {
  list-style: none; /* Remove default bullet points */
  padding: 0;       /* Remove default padding */
  margin: 0;        /* Remove default margin */
  width: 100%;
}

.useful-link {
  display: flex;        /* Use Flexbox for easy icon alignment */
  align-items: center;  /* Vertically center the icon and text */
  text-decoration: none; /* Remove underlines from links */
  color: #333;         /* Default link color */
  padding: 10px 15px;   /* Add some padding around the link */
  margin-bottom: 8px;    /* Add some space between list items */
  border: 1px solid #ddd; /* subtle border */
  border-radius: 5px;  /* rounded corners */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.useful-link i {
  margin-right: 10px;  /* Add space between the icon and the text */
  font-size: 1.2em;     /* Adjust icon size as needed */
  color: #555;           /* Icon color */
    width: 20px; /* Give icons a fixed width for consistent alignment */
    text-align: center; /* Center-align the icon within its space */
}

/* --- Hover Effect --- */

.useful-link:hover {
  background-color: #f0f0f0; /* Light background on hover */
  color: #007bff;          /* Change text color on hover */
  border-color: #007bff;   /* Change border color on hover*/
}
.useful-link:hover i{
    color: #007bff; /*Change icon to blue on hover*/
}

/* --- Button Style (optional) --- */

.useful-link-button {
  background-color: #007bff; /* Blue background */
  color: #fff;              /* White text */
  border: none;             /* Remove border */
}

.useful-link-button:hover {
  background-color: #0056b3; /* Darker blue on hover */
  /* No need to change text color, it's already white */
}
.useful-link-button:hover i{
  color: #fff;
}

@media (max-width: 767px) {
#last-link {
    margin-bottom: 150px;
}
}

@media (min-width: 768px) {
#last-link {
    margin-bottom: 40px;
}
}

.bunny-vid, .bunny-vid > iframe {
    border-radius: 10px !important;
}

.bunny-vid > iframe {
    box-shadow: 0px 0px 4px 0px;
}



/* Left Sidebar QR*/
body > div > aside > section > ul > img {
    width: 85% !important;
}


/*Add Device*/
.modal-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

#modal-add-device > div > div > div.modal-body > ol {
    padding: 0px;
}

.modal-content {
    border-radius: 10px;
}

#modal-add-device > div > div > div.modal-body > ol > div > div.column3 > img {
    width: 60%;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 60%;
    }
}

#qr-code {
    width: 72%;
}

#modal-add-device > div > div > div.modal-body > ol > div > div.column3 > p {
    text-align: left;
}

#modal-add-device > div > div > div.modal-body > ol > div > div.column4 > span {
    width: 100%;
}

#modal-add-device > div > div > div.modal-body > ol > div:nth-child(2) > div.column1 > p, #modal-add-device > div > div > div.modal-body > ol > div:nth-child(2) > div.column2 > p {
    text-align: left;
}

#modal-add-device > div > div > div.modal-body > ol > div:nth-child(1) > div.column4 > p {
    text-align: left;
}

.bottom-btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-btn > .new-device-close {
    width: 100%;
}

.new-device-close {
    width: 60%;
    border-radius: 10px;
    background: #117aeb;
    color: white;
    font-size: 20px;
    border: none;
    padding: 15px;
}

.new-device-close:hover {
    box-shadow: 0px 0px 20px 2px lightgrey;
}


.appqr {
    border-radius: 10px;
    border: 4px solid black;
    background: white;
    padding: 10px;
    margin-left: 7%;
}

.scan-to-download {
    background: white;
    border-radius: 5px;
    color: #117aeb;
    width: 80%;
    text-align: center;
    padding: 10px;
    margin-left: 10%;
    margin-top: 10px;
    position: relative; /* Important for positioning the pseudo-element */
}

.scan-to-download::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute; /* Position the triangle absolutely */
    top: -10px;  /*  Position it 10px above the top of the div */
    left: 50%;  /* Center it horizontally */
    transform: translateX(-50%); /* Adjust for perfect centering */
    border-left: 5px solid transparent;  /*  Left side - half the base width */
    border-right: 5px solid transparent; /*  Right side - half the base width */
    border-bottom: 10px solid white; /*  Bottom (base) - controls height */
    z-index: 2;
}

.scan-to-download i{
	margin-right: 5px;
}

.css-1gpraqj .material-symbols-outlined {
    font-size: 2.2rem !important;
}

@media (max-width: 767px) {
.css-dbll3x {
    position: fixed !important;
    left: 10px !important;
    bottom: 10px !important;
    height: 40px !important;
}
}

@media (min-width: 768px) {
#popover-trigger-\:r1\: {
    height: 40px !important;
    bottom: -20px !important;
    right: -20px !important;
}
}

.css-dbll3x, #popover-trigger-\:r1\: > button {
    font-size: 1.5rem !important;
    height: 40px !important;
}

#crmChatIframe {
    margin-bottom: -20px !important;
}

.css-1gpraqj {
    width: 40px !important;
}

@media (min-width: 768px) {
.add-device-video {
    margin-left: 25% !important;
    width: 45% !important;
    box-shadow: 0px 0px 20px 2px lightgrey;
    margin-bottom: 20px;
}
}

#Dash-Add-Device {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    #modal-add-device > div > div > div.modal-body > ol > div:nth-child(3) > div.column3 {
        display: none !important;
    }
}


#modal-add-device > div > div > div.modal-body > ol > div:nth-child(2) > div.column1 > p, #modal-add-device > div > div > div.modal-body > ol > div:nth-child(2) > div.column2 > p {
    margin-bottom: 0px !important;
}

#modal-add-device > div > div > div.modal-body > ol > div:nth-child(3) {
    margin-top: -30px;
}

@media (max-width: 767px) {
.download-btn {
    display: flex;
    justify-content: center;
    background: #117aeb;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

#modal-add-device {
    padding-left: 0px !important;
}
}

@media (min-width: 768px) {
    .download-btn {
        display: none;
    }
}



.login-box-body, .register-box-body {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

body > div.login-box > div.box-footer {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}


label {
    font-size: 1.5rem !important;
}

.modal-title {
    font-family: Inter, Poppins, sans-serif;
}

.form-control {
    font-size: 1.5rem !important;
}

#ey0zpmh > button {
    font-size: 1.5rem !important;
    background: #117aeb !important;
    opacity: 1 !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

#modal-add-device > div > div > div.modal-header {
    display: flex;
    justify-content: center;
}

#modal-add-device > div > div > div.modal-header > button {
    margin-top: -10px;
    position: absolute;
    right: 10px;
}

@media (min-width: 768px) {
.content-wrapper {
    margin-top: 50px !important;
}
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #117aeb !important;
    border-color: #117aeb !important;
}

.main-sidebar, .main-header {
    position: fixed !important;
}

.main-header {
    width: 100% !important;
}

.skin-blue .main-header .navbar {
    border-bottom: 1px solid lightgrey;
}



.content {
    min-height: 200px;
}

.hide {
    display: none;
}

.flexbox {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

#form-style {
    padding: 20px;
}

#alertSuccess > a {
    word-wrap: break-word;
}

#ajaxResult {
    max-width: 100% !important;
    width: 55vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#ajaxResult .alert {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
}

.flexbox {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 20px !important;
}

#max65 {
    padding: 0 !important;
    margin: 0 !important;
}



.instructions {
    background: white;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
}

.box {
    border-radius: 10px;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
}

.box-header {
    padding: 15px !important;
}

.box-body {
    padding: 15px !important;
}

.box-footer {
    padding: 15px !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #117aeb;
    border-color: #117aeb;
}


.css-dbll3x, #popover-trigger-\:r1\: {
    bottom: 10px !important;
    right: 10px !important;
    position: fixed !important;
}

.setup {
    display: none;
}

#toggleButton {
    padding: 10px 20px;
    background-color: #117aeb;
    border: none;
    border-radius: 5px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: block; /* Important for centering and width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto;/* Center horizontally */
    font-size: 20px;
    cursor: pointer;
    margin-bottom: 5px;
    width: 20%;       /* Default width (desktop) */
}

/* Media query for mobile devices (max-width: 768px) */
@media (max-width: 768px) {
  #toggleButton {
    width: 95%;     /* 100% width on mobile */
  }
}

#toggleButton:hover {
    background-color: #0d61b8; 
}

.generate, #copy-transform-button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 2rem !important;
}

.flow-warning {
    border: 2px solid #dc0000;
    color: white;
    padding: 15px;
    border-radius: 16px;
    background: #dc000080;
    font-family: Inter, Poppins, sans-serif;
}

.alert a {
    color: black;
}

#toggleApiKeySection {
    margin-bottom: 10px;
}

.alert.alert-success2.alert-dismissible {
    border: 2px solid grey;
    border-radius: 16px;
}

.sidebar-menu>li>a {
    padding: 8px 5px 8px 8px;
}

.mobile-only-logo .default-logo {
    margin-bottom: 0 !important;
}