/*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */



[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
  display: none;
}

.input-group > .select2-container--bootstrap {
	width: auto;
	flex: 1 1 auto;
}

.bg-text
{
    color: rgba(255, 0, 0, 0.5);
    font-size:85px;
    position:absolute;
    z-index: 1000;
    transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
    overflow: hidden;
}

.sorting {
    cursor: pointer;
}

.section-heading {
  width: 100%;
  height: 0.8rem;
  text-align: center;
  margin: 0 0 20px;
  /* color */
  color: gray;
  border-bottom: 1px lightgray solid;
}

.section-title {
  background: #fff;
  font-size: 0.8rem;
  padding: 10px;
}


.input-group > .select2 > .selection > .select2-selection {
    border-radius:0.5rem 0 0 0.5rem;
    border: 1px solid #ccc !important;
}

.input-group > .select2-container--bootstrap .select2-selection--single {
	height: 100%;
	line-height: inherit;
	padding: 0.5rem 1rem;
}

:root {
  --color1: #e2f8ff;
  --color2: #b6e2ef;
  --color3: #5bc0de;
  --color4: #03a9f4;
  --color5: #135d84;
}

#loader {
    color: var(--color3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5000;
}

.dropdown2 .dropdown2-menu {
    left: auto;
    right: 5px;
    width: 12.5rem;
    padding: 0;
    margin : auto ;
}

.dropdown-menu {
    white-space: normal;
    z-index: 1000000 !important;
}

.dropdown2-item {
    padding: 15px;
}

body {
  font-family: 'Red Hat Text';
  overflow-x: scroll;
}

.list-group-item {
    border:0 !important;
    padding-top:15px !important;
    padding-bottom:15px !important;
}

#message {
    position: fixed;
    top: 10;
    left: 0;
    z-index: 999;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

.navbar-light .navbar-toggler-icon{
    background-image: url(caret_down.png)!important;
}


#inner-message {
    opacity: 90%;
    width: 66%;
    margin: 0 auto;
}

input.importe{
  border:none;
  /*font-weight: bold;*/
  font-size: 10;
  margin-left: 10px;
  background-color: transparent;
}
input.importe:focus {
    outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.fa-user-circle-o{
  color: gray;
}

.input-group {
  align-self: flex-start;
}

.input-group2{
  border: 1px gray solid;
  border-radius: 5px;
  padding: 15px;

}
.carousel-control-prev, .carousel-control-next {
    background-color: rgba(182,226,239, 0.4);
}

.clickable {
    cursor: pointer;
}

#topBtn {
    display: none;
	position:fixed;
	width:40px;
	height:40px;
	bottom:30px;
	left:30px;
	padding: 10px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    z-index: 99;
    border: none;
    -webkit-box-shadow: 3px 3px 3px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    3px 3px 5px #ccc;  /* Firefox 3.5 - 3.6 */
    box-shadow:         3px 3px 5px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

}

#topBtn:hover {
  background-color: var(--color4);
}


.fab_solo:hover, .float:hover, .float_2:hover, .float_3:hover, .mdl-fab-bottom-right:hover {
  background-color: var(--color4);
  color:#FFF;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -12.5rem;
  -webkit-transition: margin .1s ease-out;
  -moz-transition: margin .1s ease-out;
  -o-transition: margin .1s ease-out;
  transition: margin .1s ease-out;
}


#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  height:5.729rem;
  font-size: 1.2rem;
}

.navbar-expand-sm {
    box-shadow: 0 4px 3px -3px gray;
    z-index: 999999;
}

.swal2-backdrop-show {
    z-index: 1000000 !important;
}

.modal-backdrop {
  z-index: 1000000 !important;
}

.modal {
  z-index: 1000001 !important;
}

#sidebar-wrapper .list-group {
  width: 12.5rem;
}

.list-group {
  padding-right: 0px !important;
  margin-right: 0px !important;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

.content-section {
  background: #ffffff;
  padding: 20px 20px 20px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  /*white-space: pre-line;*/
  font-size: 0.9em;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}


.mdl-fab-bottom-right {
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	padding: 20px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}

input[readonly] {
    background-color: white !important;
    cursor: text !important;
}


.mdl-button--fab-expandable,.mdl-button--fab-expandable *{z-index:9999}
.mdl-button--fab-expandable.is-active>.mdl-fab-expandable--children{display:block!important}
.mdl-button--fab-expandable.is-active {background-color: var(--color4)}
.mdl-button--fab-expandable.bottom>.mdl-fab-expandable--children{display:none;position:absolute;bottom:56px;left:8px}
.mdl-button--fab-expandable.top>.mdl-fab-expandable--children{display:none;position:absolute;top:56px;left:8px}
.mdl-button--fab-expandable.bottom .mdl-fab-expandable--child{position:relative;margin-bottom:16px}
.mdl-button--fab-expandable.top .mdl-fab-expandable--child{position:relative;margin-top:16px}
.mdl-fab-expandable--children .mdl-fab-expandable--child-label{min-width:200px}
.mdl-fab-expandable--child-label>*{font-size:14px;font-weight:700;line-height:1;background-color:#fff;padding:8px;border-radius:8px}
.mdl-button--fab-expandable.left .mdl-fab-expandable--child-label{position:absolute;left:48px;top:10px;text-align:left}
.mdl-button--fab-expandable.right .mdl-fab-expandable--child-label{position:absolute;right:48px;top:10px;text-align:right}

.fab_solo{
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:120px;
	right:40px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.float_wsp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color: #25D366;
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
  font-size: 36px;
}

.float_wsp:hover {
  background-color: #075E54;
  color:#FFF;
}


.float_clp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:120px;
	right:40px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
  font-size: 36px;
}

.float_clp:hover {
  background-color: var(--color4);
  color:#FFF;
}



.float_2{
	position:fixed;
	width:60px;
	height:60px;
	bottom:200px;
	right:40px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.float_3{
	position:fixed;
	width:60px;
	height:60px;
	bottom:280px;
	right:40px;
	background-color: var(--color3);
	cursor: pointer;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	margin-top:22px;
}


#invoice{
    padding: 30px;
}

.invoice {
    position: relative;
    background-color: #FFF;
    min-height: 600px;
    padding: 15px;
}

.invoice header {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #3989c6;
}

.invoice .company-details {
    text-align: right;
}

.invoice .company-details .name {
    margin-top: 0;
    margin-bottom: 0;
}

.invoice .contacts {
    margin-bottom: 20px;
}

.invoice .invoice-to {
    text-align: left;
}

.invoice .invoice-to .to {
    margin-top: 0;
    margin-bottom: 0;
}

.invoice .invoice-details {
    text-align: right;
}

.invoice .invoice-details .invoice-id {
    margin-top: 0;
    color: #3989c6;
}

.invoice main {
    padding-bottom: 30px;
}

.invoice main .thanks {
    margin-top: -100px;
    font-size: 2em;
    margin-bottom: 30px;
}

.invoice main .notices {
    padding-left: 6px;
    border-left: 6px solid #3989c6;
}

.invoice main .notices .notice {
    font-size: 1em;
}

.invoice table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
}

.invoice table td,.invoice table th {
    padding: 5px;
    background: #eee;
    border-bottom: 1px solid #fff;
}

.invoice table th {
    white-space: nowrap;
    font-weight: 400;
    font-size: 1.2em;
}

.invoice table td h3 {
    margin: 0;
    font-weight: 400;
    color: #3989c6;
    font-size: 1.2em;
}

.invoice table .qty,.invoice table .total,.invoice table .unit {
    text-align: right;
    font-size: 0.9em;
}

.invoice table .no {
    color: #fff;
    font-size: 1.6em;
    background: #3989c6;
}

.invoice table .unit {
    background: #ddd;
}

.invoice table .total {
    background: #3989c6;
    color: #fff;
}

.invoice table tbody tr:last-child td {
    border: none;
}

.invoice table tfoot td {
    background: 0 0;
    border-bottom: none;
    white-space: nowrap;
    text-align: right;
    /*padding: 10px 20px;*/
    font-size: 1.2em;
    border-top: 1px solid #aaa;
}

.invoice table tfoot tr:first-child td {
    border-top: none;
}

.invoice table tfoot tr:last-child td {
    color: #3989c6;
    font-size: 1.4em;
    border-top: 1px solid #3989c6;
}

.invoice table tfoot tr td:first-child {
    border: none;
}

.invoice footer {
    width: 100%;
    text-align: center;
    color: #777;
    border-top: 1px solid #aaa;
    padding: 8px 0;
}



@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -12.5rem;
  }
}

@media print {
    #exampleModal {display: none }
    .float { display: none }
    .float_2 { display: none }
    .float_3 { display: none }
    .mdl-fab-bottom-right { display: none }
    .invoice {
        font-size: 11px!important;
        overflow: hidden!important
    }

    .invoice footer {
        position: absolute;
        bottom: 10px;
        page-break-after: avoid;
    }

    .no-print, .no-print *
    {
        display: none !important;
    }

    /*.invoice>div:last-child {
        page-break-before: always
    }*/
}

.header-nowrap {
    white-space: nowrap;
}


@media (max-width: 1200px) {
  .navbar{
    position: fixed;
    right: 0;
    left: 0;   
    border-radius: 0;
    top: 0;
  }      
}

body.modal-open {
    overflow: auto;
}
body.modal-open[style] {
    padding-right: 0px !important;
}

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://stackoverflow.com/a/26500272/2259400 */
}

.iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");}
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
  width: 20rem;
}

#clockContainer {
  position: relative;
  margin: auto;
  height: 8em;
  /*to make the height and width responsive*/
  width: 8em;
  background: url('imgonlinecomuaCompressToSizeOmNATjUMFKw-300x300.png') no-repeat;
  /*setting our background image*/
  background-size: 100%;
  }
  
  #hour,
  #minute,
  #second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
  }
  
  #hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
  }
  
  #minute {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
  }
  
  #second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
  }

  .is-hidden {
    display: none !important;
  }