.size-12 { min-width: 100%; }
.size-11 { min-width: 91.66666667%; }
.size-10 { min-width: 83.33333333%; }
.size-9  { min-width: 75%; }
.size-8  { min-width: 66.66666667%; }
.size-7  { min-width: 58.33333333%; }
.size-6  { min-width: 50%; }
.size-5  { min-width: 41.66666667%; }
.size-4  { min-width: 33.33333333%; }
.size-3  { min-width: 25%; }
.size-2  { min-width: 16.66666667%; }
.size-1  { min-width: 8.33333333%; }
.size-half  { min-width: 4.1666666; }

.fixed-size-12 { width: 100%; }
.fixed-size-11 { width: 91.66666667%; }
.fixed-size-10 { width: 83.33333333%; }
.fixed-size-9  { width: 75%; }
.fixed-size-8  { width: 66.66666667%; }
.fixed-size-7  { width: 58.33333333%; }
.fixed-size-6  { width: 50%; }
.fixed-size-5  { width: 41.66666667%; }
.fixed-size-4  { width: 33.33333333%; }
.fixed-size-3  { width: 25%; }
.fixed-size-2  { width: 16.66666667%; }
.fixed-size-1  { width: 8.33333333%; }
.fixed-size-half  { width: 4.166666%; }

.tar {text-align:right} 
.tal {text-align:left} 
.tac {text-align:center} 
.vatt { vertical-align: text-top} 

.wrow {
  margin-right: -40px;
  margin-left: -40px;
}
@media (min-width: 0px) {
  .wcol-sm-1, .wcol-sm-2, .wcol-sm-3, .wcol-sm-4, .wcol-sm-5, .wcol-sm-6, .wcol-sm-7, .wcol-sm-8, .wcol-sm-9, .wcol-sm-10, .wcol-sm-11, .wcol-sm-12 {
    float: left;
  }
  .wcol-sm-12 {
    width: 100%;
  }
  .wcol-sm-11 {
    width: 91.66666667%;
  }
  .wcol-sm-10 {
    width: 83.33333333%;
  }
  .wcol-sm-9 {
    width: 75%;
  }
  .wcol-sm-8 {
    width: 66.66666667%;
  }
  .wcol-sm-7 {
    width: 58.33333333%;
  }
  .wcol-sm-6 {
    width: 50%;
  }
  .wcol-sm-5 {
    width: 41.66666667%;
  }
  .wcol-sm-4 {
    width: 33.33333333%;
  }
  .wcol-sm-3 {
    width: 25%;
  }
  .wcol-sm-2 {
    width: 16.66666667%;
  }
  .wcol-sm-1 {
    width: 8.33333333%;
  }
  .wcol-sm-pull-12 {
    right: 100%;
  }
  .wcol-sm-pull-11 {
    right: 91.66666667%;
  }
  .wcol-sm-pull-10 {
    right: 83.33333333%;
  }
  .wcol-sm-pull-9 {
    right: 75%;
  }
  .wcol-sm-pull-8 {
    right: 66.66666667%;
  }
  .wcol-sm-pull-7 {
    right: 58.33333333%;
  }
  .wcol-sm-pull-6 {
    right: 50%;
  }
  .wcol-sm-pull-5 {
    right: 41.66666667%;
  }
  .wcol-sm-pull-4 {
    right: 33.33333333%;
  }
  .wcol-sm-pull-3 {
    right: 25%;
  }
  .wcol-sm-pull-2 {
    right: 16.66666667%;
  }
  .wcol-sm-pull-1 {
    right: 8.33333333%;
  }
  .wcol-sm-pull-0 {
    right: auto;
  }
  .wcol-sm-push-12 {
    left: 100%;
  }
  .wcol-sm-push-11 {
    left: 91.66666667%;
  }
  .wcol-sm-push-10 {
    left: 83.33333333%;
  }
  .wcol-sm-push-9 {
    left: 75%;
  }
  .wcol-sm-push-8 {
    left: 66.66666667%;
  }
  .wcol-sm-push-7 {
    left: 58.33333333%;
  }
  .wcol-sm-push-6 {
    left: 50%;
  }
  .wcol-sm-push-5 {
    left: 41.66666667%;
  }
  .wcol-sm-push-4 {
    left: 33.33333333%;
  }
  .wcol-sm-push-3 {
    left: 25%;
  }
  .wcol-sm-push-2 {
    left: 16.66666667%;
  }
  .wcol-sm-push-1 {
    left: 8.33333333%;
  }
  .wcol-sm-push-0 {
    left: auto;
  }
  .wcol-sm-offset-12 {
    margin-left: 100%;
  }
  .wcol-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .wcol-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .wcol-sm-offset-9 {
    margin-left: 75%;
  }
  .wcol-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .wcol-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .wcol-sm-offset-6 {
    margin-left: 50%;
  }
  .wcol-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .wcol-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .wcol-sm-offset-3 {
    margin-left: 25%;
  }
  .wcol-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .wcol-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .wcol-sm-offset-0 {
    margin-left: 0;
  }
}

.wibox-buttons{
  display: inline-block;
  float: left;
  margin-top: 0;
  position: relative;
  padding: 0;
}

.wibox-area{
  display: inline-block;
  margin-top: 0;
  position: relative;
  padding: 0;
}

; -----------------------------------------------------------------------------------------------

/* UI Sortable */
.ui-sortable .wibox-title {
  cursor: move;
}

.wibox.ui-sortable-placeholder {
  margin: 0px 0px 23px !important;
}

.wibox-content h1,
.wibox-content h2,
.wibox-content h3,
.wibox-content h4,
.wibox-content h5,
.wibox-title h1,
.wibox-title h2,
.wibox-title h3,
.wibox-title h4,
.wibox-title h5 {
  margin-top: 0px;
}

.wibox-content.text-box {
  padding-bottom: 0px;
  padding-top: 15px;
}
.wibox {
  clear: both;
  margin-bottom: 0px;
  margin-top: 0;
  padding: 0;
}
.wibox.collapsed .wibox-content {
  display: none;
}
.wibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.wibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.wibox:after,
.wibox:before {
  display: table;
}
.wibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 0px 0px 0;
  color: inherit;
  margin-bottom: 0;
  padding: 6px 15px 7px;
  min-height: 48px;
}
.wibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 10px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0px 0;
  display: block;
}

.wibox-content {
  clear: both;
}
.wibox-heading {
  background-color: #f3f6fb;
  border-bottom: none;
}
.wibox-heading h3 {
  font-weight: 200;
  font-size: 24px;
}
.wibox-title h5 {
  display: inline-block;
  font-size: 18px;
  margin: 10px 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}
.wibox-title .label {
  float: left;
  margin-left: 4px;
}
.wibox-tools {
  display: inline-block;
  float: right;
  margin-top: 0;
  position: relative;
  padding: 0;
}
.wibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
.wibox-tools a.btn-primary {
  color: #fff;
}
.wibox-tools .dropdown-menu > li > a {
  padding: 4px 10px;
  font-size: 12px;
}
.wibox .open > .dropdown-menu {
  left: auto;
  right: 0;
}
.chat-view .wibox-content {
  padding: 0;
}

.article .wibox-content {
  padding: 40px;
}
body.rtls .wibox-title h5 {
  float: right;
}
body.rtls .wibox-tools {
  float: left;
}
@media (max-width: 768px) {    
  .wibox-tools {
    float: none;
    text-align: right;
    display: block;
  }
}
@media (max-width: 350px) {
  .wibox-tools {
    float: none;
    text-align: left;
    display: inline-block;
  }
}

.btn-w-s {
  min-width: 80px;
}

.btn-w-ss {
  min-width: 40px;
}

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.table-header th { background-color: #f2fbfa; height: 15px; }
.table-body-center td { text-align: center }

.text-center { text-align: center }
.text-left   { text-align: left }
.text-right  { text-align: right }

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 320px;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}
	
.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
	left: -320px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
	        transition: opacity 0.3s linear, left 0.3s ease-out;
}
	
.modal.left.fade.in .modal-dialog{
	left: 0;
}
       
/*Right*/
.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}
	
.modal.right.fade.in .modal-dialog {
	right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
	border-radius: 0;
	border: none;
}

.modal-header {
	border-bottom-color: #EEEEEE;
	background-color: #FAFAFA;
}

.icon-copy {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border: 0;
background: transparent;
}


@media screen and (max-width: 1920px) and (min-width: 800px) {
    .menu-bars { display:block; }
}

@media screen and (max-width: 800px) {
    .menu-bars {display: block; }
}

@media screen and (max-width: 1225px) and (min-width: 1045px) {
    .p-5, .priority-5{ display:none; }
}

.align-center { display: flex; align-items:center; }
.fa-1x5 { font-size:1.5em; }

@media screen and (max-width: 1225px) and (min-width: 1045px) {
    .p-5, .priority-5{ display:none; }
  }
  
@media screen and (max-width: 1045px) and (min-width: 835px) {
    .p-5, .p-4, .priority-5, .priority-4 { display:none; } 
  }
  
@media screen and (max-width: 835px) and (min-width: 565px) {
    .p-5, .p-4, .p-3, .priority-5, .priority-4, .priority-3 { display:none; } 
  }
  
  @media screen and (max-width: 565px) and (min-width: 300px) {
    .p-5, .p-4, .p-3, .p-3, .priority-5, .priority-4, .priority-3, .priority-2 { display:none; } 
  }

  @media screen and (max-width: 300px) {
    .p-5, .p-4, .p-3, .p-3, .p-1, .priority-5, .priority-4, .priority-3, .priority-2, priority-1 { display:none; } 
  }
  
.box_error_message {
    border: 2px dashed #f12020;
    border-radius: 5px;
    background: #f1adad;
    padding: 10px 10px 10px 10px;
    min-height: 0px;
    font-size: 16px;
    font-weight: 700;
  }

.box_ok_message {
    border: 2px dashed #04ff36;
    border-radius: 5px;
    background: #bceab9;
    padding: 10px 10px 10px 10px;
    min-height: 0px;
    font-size: 16px;
    font-weight: 700;
  }

body { overflow-y: scroll; }

.avatar-wrapper {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 50px auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 1px 15px -5px black;
  transition: all 0.3s ease;
}
.avatar-wrapper:hover {
  transform: scale(1.05);
  cursor: pointer;
}
.avatar-wrapper:hover .profile-pic {
  opacity: 0.5;
}
.avatar-wrapper .profile-pic {
  height: 100%;
  width: 100%;
  transition: all 0.3s ease;
}
.avatar-wrapper .profile-pic:after {
  font-family: FontAwesome;
  content: "\f007";
  top: 0px;
  padding-top: 80px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 150px;
  background: #ecf0f1;
  color: var(--primary-color);
  text-align: center;
}
.avatar-wrapper .upload-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.avatar-wrapper .upload-button .fa-arrow-circle-up {
  position: absolute;
  font-size: 234px;
  top: -17px;
  left: -17px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--primary-color);
}
.avatar-wrapper .upload-button:hover .fa-arrow-circle-up {
  opacity: 0.9;
}

.chat-user-origin {
    float: right;
    padding-left: 10px;
}

.chat-message-preview {
    font-size: 10px;
    color: #888888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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