body {
    font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

.upload_form {
    margin-top: 30px;
}

/* .upload_form h2,
.upload_form label {
    font-family: Georgia, Times, "Times New Roman", serif;
} */

.form_hint,
.required_notification {
    font-size: 11px;
}

:-moz-placeholder {
    color: blue;
}

/* CMake: Windows Client Version: 3.8.11.2 (cmake-2.8.11.2-win32-x86.exe) (http: //www.cmake.org/cmake/resources/software.html) Install to defaults. It is important to have this version as the Cuda and IPP modules have been changing and older version have been shown not to work with these build scripts. */
/* ::-webkit-input-placeholder {
    color: blue;
} */

*:focus {
    outline: none;
}

.upload_form ul {
    width              : 100%;
    /*750px;*/
    list-style-type    : none;
    list-style-position: outside;
    margin             : 0px;
    padding            : 0px;
}

.upload_form li {
    /* padding        : 6px; */
    /*border-bottom:1px solid #eee;*/
    position       : relative;
}

.upload_form li:first-child,
.upload_form li:last-child {
    /*border-bottom:1px solid #777;*/
}

.upload_form>div:not(.row) {
    /*width: 100%; 750px;*/
    /* padding        : 10px; */
    /* margin         : 10px; */
    /*border-bottom:1px solid #eee;*/
    /* position       : relative; */
}

.upload_form div:first-child,
.upload_form div:last-child {
    /*border-bottom:1px solid #777;*/
}

.upload_form h2 {
    margin : 0;
    display: inline;
}

.required_notification {
    color  : #d45252;
    margin : 5px 0 0 0;
    display: inline;
    float  : left;
}

.upload_form label:not(.col) {
    /* width        : 200px;
    /*margin-top : 3px;
    display      : inline-block;
    float        : left; */
    /*padding    :3px;*/
    /*margin-left: 20px;*/
}

.upload_form input:not(.col) {
    /*height:20px; */
    /*width:120px; */
    /* padding: 5px 8px; */
}

.upload_form textarea {
    padding: 8px;
    width  : 300px;
}

.upload_form button {
    /*margin-left:156px;*/
}

.upload_form input,
.upload_form textarea {
    /* border       : 1px solid #aaa;
    /*box-shadow : 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 2px; */
}

/* .upload_form input:focus,
.upload_form textarea:focus {
    background: #fff;
    border    : 1px solid #555;
    box-shadow: 0 0 3px #aaa;
} */

/* Button Style */

button.submit:active {
    border            : 1px solid #912911;
    box-shadow        : 0 0 10px 5px #912911 inset;
    -webkit-box-shadow: 0 0 10px 5px #912911 inset;
    -moz-box-shadow   : 0 0 10px 5px #912911 inset;
    -ms-box-shadow    : 0 0 10px 5px #912911 inset;
    -o-box-shadow     : 0 0 10px 5px #912911 inset;
}

button.delete {
    background-color     : #912911;
    background           : -webkit-gradient(linear, left top, left bottom, from(#912911), to(#912911));
    background           : -webkit-linear-gradient(top, #912911, #912911);
    background           : -moz-linear-gradient(top, #912911, #912911);
    background           : -ms-linear-gradient(top, #912911, #912911);
    background           : -o-linear-gradient(top, #912911, #912911);
    background           : linear-gradient(top, #912911, #912911);
    border               : 1px solid #912911;
    border-bottom        : 1px solid #912911;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    box-shadow           : inset 0 1px 0 0 #912911;
    -webkit-box-shadow   : 0 1px 0 0 #912911 inset;
    -moz-box-shadow      : 0 1px 0 0 #912911 inset;
    -ms-box-shadow       : 0 1px 0 0 #912911 inset;
    -o-box-shadow        : 0 1px 0 0 #912911 inset;
    color                : white;
    font-weight          : bold;
    padding              : 6px 20px;
    text-align           : center;
    text-shadow          : 0 -1px 0 #396715;
}

button.delete:hover {
    opacity: .85;
    cursor : pointer;
}

button.delete:active {
    border            : 1px solid #912911;
    box-shadow        : 0 0 10px 5px #912911 inset;
    -webkit-box-shadow: 0 0 10px 5px #912911 inset;
    -moz-box-shadow   : 0 0 10px 5px #912911 inset;
    -ms-box-shadow    : 0 0 10px 5px #912911 inset;
    -o-box-shadow     : 0 0 10px 5px #912911 inset;
}

button.cancel {
    background-color     : #C0C0C0;
    background           : -webkit-gradient(linear, left top, left bottom, from(#C0C0C0), to(#912911));
    background           : -webkit-linear-gradient(top, #C0C0C0, #C0C0C0);
    background           : -moz-linear-gradient(top, #C0C0C0, #C0C0C0);
    background           : -ms-linear-gradient(top, #C0C0C0, #C0C0C0);
    background           : -o-linear-gradient(top, #C0C0C0, #C0C0C0);
    background           : linear-gradient(top, #C0C0C0, #C0C0C0);
    border               : 1px solid #C0C0C0;
    border-bottom        : 1px solid #C0C0C0;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    box-shadow           : inset 0 1px 0 0 #C0C0C0;
    -webkit-box-shadow   : 0 1px 0 0 #C0C0C0 inset;
    -moz-box-shadow      : 0 1px 0 0 #C0C0C0 inset;
    -ms-box-shadow       : 0 1px 0 0 #C0C0C0 inset;
    -o-box-shadow        : 0 1px 0 0 #C0C0C0 inset;
    color                : white;
    font-weight          : bold;
    padding              : 6px 20px;
    text-align           : center;
    text-shadow          : 0 -1px 0 #396715;
}

button.delete:hover {
    opacity: .85;
    cursor : pointer;
}

button.delete:active {
    border            : 1px solid #C0C0C0;
    box-shadow        : 0 0 10px 5px #C0C0C0 inset;
    -webkit-box-shadow: 0 0 10px 5px #C0C0C0 inset;
    -moz-box-shadow   : 0 0 10px 5px #C0C0C0 inset;
    -ms-box-shadow    : 0 0 10px 5px #C0C0C0 inset;
    -o-box-shadow     : 0 0 10px 5px #C0C0C0 inset;
}

/* add this to the already existing style */

/*.upload_form input:focus, .upload_form textarea:focus {
    padding-right:50px;
}*/

/* .upload_form input,
.upload_form textarea {
    -moz-transition   : padding .25s;
    -webkit-transition: padding .25s;
    -o-transition     : padding .25s;
    transition        : padding .25s;
} */

.upload_form input:not(.col),
.upload_form textarea {
    /* padding-right: 30px; */
}

input:required,
textarea:required {
    /*background: #fff url(images/red_asterisk.png) no-repeat 98% center;*/
}

::-webkit-validation-bubble-message {
    padding: 1em;
}

/* when a field is considered invalid by the browser */

.upload_form input:focus:invalid,
.upload_form textarea:focus:invalid {
    background  : #fff no-repeat 98% center;
    box-shadow  : 0 0 5px #d45252;
    border-color: #b03535
}

/* when a field is considered valid by the browser */

/* .upload_form input:required:valid,
.upload_form textarea:required:valid {
    background-color   : rgb(255, 254, 209)
        
} */

.form_hint {
    background   : blue;
    border-radius: 3px 3px 3px 3px;
    color        : white;
    margin-left  : 8px;
    padding      : 1px 6px;
    z-index      : 999;
    /* hints stay above all other elements */
    position     : absolute;
    /* allows proper formatting if hint is two lines */
    display      : none;
}

.form_hint::before {
    content : "\25C0";
    /* left point triangle in escaped unicode */
    color   : #d45252;
    position: absolute;
    top     : 1px;
    left    : -6px;
}

.upload_form input:focus+.form_hint {
    display: inline;
}

/* change form hint color when valid */

.upload_form input:required:valid+.form_hint {
    background: #28921f;
}

/* change form hint arrow color when valid */

.upload_form input:required:valid+.form_hint::before {
    color: #28921f;
}

@media screen and (max-width: 480px) {

    div#wrapper,
    li#wrapper {
        /* width             : 400px; */
        /*background-image: url(phone-bg.jpg);*/
    }
}

@media screen and (max-width: 1024px) and (min-width: 481px) {

    div#wrapper,
    li#wrapper {
        /*width: 800px;*/
        /*background-image: url(tablet-bg.jpg);*/
    }
}

@media screen and (min-width: 1025px) {

    div#wrapper,
    li#wrapper {
        /* width             : 1080px; */
        /* background-image: url(fullsize-bg.jpg); */
    }
}

div.tagsinput {
    border    : 1px solid #ccc;
    background: #FFF;
    padding   : 5px;
    width     : 300px;
    height    : 100px;
    overflow  : hidden
}

div.tagsinput span.tag {
    border               : 1px solid #cbe290;
    -moz-border-radius   : 2px;
    -webkit-border-radius: 2px;
    display              : block;
    float                : left;
    padding              : 2px 5px;
    text-decoration      : none;
    background           : #cde69c;
    color                : #638421;
    margin-right         : 5px;
    margin-bottom        : 5px;
    font-family          : helvetica;
    font-size            : 12px
}

div.tagsinput span.tag a {
    font-weight    : bold;
    color          : #82ad2b;
    text-decoration: none;
    font-size      : 11px
}

div.tagsinput input {
    width        : 80px;
    margin       : 0px;
    font-family  : helvetica;
    font-size    : 13px;
    border       : 1px solid transparent;
    padding      : 5px;
    background   : transparent;
    color        : #000;
    outline      : 0px;
    margin-right : 5px;
    margin-bottom: 5px
}

div.tagsinput div.tag {
    display: block;
    float  : left
}

.tags_clear {
    clear : both;
    width : 100%;
    height: 0px
}

.not_valid {
    background: #FBD8DB !important;
    color     : #90111A !important
}

.tagsinput_charCounter,
.tagsinput_tagCounter {
    text-align: right;
    color     : #aaa;
    font-size : 12px;
    margin-top: 3px
}

.tagsinput_charCounter .countDown,
.tagsinput_tagCounter .countDown {
    margin-left: 5px
}

.tagsinput_charCounter.prewarning,
.tagsinput_tagCounter.prewarning {
    color: #860f0f
}

.tagsinput_charCounter.warning,
.tagsinput_tagCounter.warning {
    color: #d62929
}

.tagsinput_charCounter.exceeded,
.tagsinput_tagCounter.exceeded {
    color      : #ff5500;
    font-weight: bold
}

.tagsinput_tagCounter {
    float: left
}

div.tagsinput.disabled {
    background: #f0f0f0
}

div.tagsinput.disabled .tag {
    border: 1px solid #ddd
}

div.tagsinput.disabled .tag a {
    display: none
}

div.tagsinput.disabled .input_wrapper {
    display: none
}

/*Navigation bar */

.nav {
    position   : relative;
    display    : inline-block;
    font-size  : 12px;
    font-weight: 900;
    background : 'blue';
    height     : 55px;
    float      : right;
}

.nav-list {
    display: block;
}

.nav-item {
    float  : left;
    display: inline;
    zoom   : 1;
}

.nav-item a {
    display     : block;
    padding     : 15px 8px;
    color       : #34495E;
    /*background:#34495E;*/
}

.nav-item:first-child a {
    border-radius: 5px 0 0 5px;
}

.nav-item:last-child a {
    border-radius: 0 5px 5px 0;
}

.nav-item a:hover {
    background: #abbedf;
}

.nav-mobile {
    display              : none;
    /* Hide from browsers that don't support media queries */
    cursor               : pointer;
    position             : absolute;
    top                  : 8px;
    right                : 0;
    background           : #000 url('../i/nav.png') no-repeat center center;
    height               : 40px;
    width                : 40px;
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    background-position  : -3px -1px;
}

@media only screen and (min-width: 20px) and (max-width: 1020px) {
    .nav-mobile {
        display: block;
    }

    .nav {
        /*width:100%;*/
        padding: 50px 0 0;
    }

    .nav-list {
        display: none;
    }

    .nav-item {
        /*width:100%;*/
        float: none;
    }

    .nav-item a {
        background: #abbedf;
        padding   : 10px;
    }

    .nav-item:first-child a {
        border-radius: 5px 0 0;
    }

    .nav-item:last-child a {
        border-radius: 0 0 5px 5px;
    }

    .nav-active {
        display: block;
    }

    .nav-mobile-open {
        border-radius        : 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius   : 5px 5px 0 0;
    }
}

/*main body */

.container {
    margin-top : 50px;
    margin-left: 0px;
}

.logo-black {
    background     : transparent url('../i/LARGEWhiteFittzyLogo.png') no-repeat 0 0;
    width          : 350px;
    height         : 40px;
    margin-left    : 15px;
    margin-top     : 15px;
    background-size: 100%;
    display        : block;
    /*position     : absolute;*/
}

.spinner {
    width : 50px;
    height: 80px;
    border: 0px;
    margin: 0px;
}

/******************************************************
 Creates Lightbox when image on /myphotos is clicked */

.header-txt {
    font-family: Georgia, Times, "Times New Roman", serif;
    ;
    padding       : 10px;
    border-spacing: 5px;
    font-size     : 18px;
    margin-bottom : 20px;
    /*background  : #222;*/
    /*color       : #aaa;*/
    /*text-align  :center;*/
}

h1 {
    font-size  : 3em;
    font-weight: 200;
    margin     : 0.5em 0 0.2em 0;
}

.thumbnail {
    width : 200px;
    height: 200px;
}

.italic {
    font-style: italic;
}

.small {
    font-size: 0.8em;
}

/** LIGHTBOX MARKUP **/

.lightbox {
    /** Default lightbox to hidden */
    display   : none;
    /** Position and style */
    position  : fixed;
    z-index   : 999;
    width     : 100%;
    height    : 100%;
    text-align: center;
    top       : 0;
    left      : 0;
    background: rgba(0, 0, 0, 0.8);
}

.lightbox img {
    /** Pad the lightbox image */
    margin-top    : 0;
    margin-bottom : 0;
    margin-left   : auto;
    margin-right  : auto;
    max-width     : 400px;
    max-height    : 600px;
    padding-top   : 100px;
    padding-bottom: 100px;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;
    /** Unhide lightbox **/
    display: block;
}

/**************************************************
For text under images /myPhotos*/

.img-text {
    text-align: center;
    width     : 200px;
}

/*.img-text img{
    display: block;
    margin-top: 0px;
}*/

/***************************************************
Code for the expanding thumbnail on /myPhotos */

img {
    width  : 100%;
    display: block;
}

.img-expand {
    position         : absolute;
    top              : 50%;
    left             : 50%;
    width            : 320px;
    height           : 240px;
    -webkit-transform: translate(-50%, -50%);
    /* Safari and Chrome */
    -moz-transform   : translate(-50%, -50%);
    /* Firefox */
    -ms-transform    : translate(-50%, -50%);
    /* IE 9 */
    -o-transform     : translate(-50%, -50%);
    /* Opera */
    transform        : translate(-50%, -50%);
}

/*.image {
    width: 100%;
    height: 100%;
}*/

.image-expand img {
    -webkit-transition: all 1s ease;
    /* Safari and Chrome */
    -moz-transition   : all 1s ease;
    /* Firefox */
    -o-transition     : all 1s ease;
    /* IE 9 */
    -ms-transition    : all 1s ease;
    /* Opera */
    transition        : all 1s ease;
}

.image-expand:hover img {
    -webkit-transform: scale(1.25);
    /* Safari and Chrome */
    -moz-transform   : scale(1.25);
    /* Firefox */
    -ms-transform    : scale(1.25);
    /* IE 9 */
    -o-transform     : scale(1.25);
    /* Opera */
    transform        : scale(1.25);
}

/***************************************************************
 Accordion for the myPhotos sections.*/

/* Style the buttons that are used to open and close the accordion panel */

button.accordion {
    background-color: #eee;
    color           : #444;
    cursor          : pointer;
    padding         : 18px;
    width           : 100%;
    text-align      : left;
    border          : none;
    outline         : none;
    transition      : 0.4s;
    /*visibility    : hidden;*/
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

button.accordion.active,
button.accordion:hover {
    background-color: #ddd;
}

/* Style the accordion panel. Note: hidden by default */

/* div.panel {
    padding: 18px;
    background-color: white;
    display: none;
} */

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */

/* div.panel.show {

    display: block;
} */

/* div.panel {
    padding: 18px;
    background-color: white;
    max-height: 0; */

/*overflow: hidden;*/

/* overflow: auto; */

/*-webkit-transition: 0.6s ease-in-out;*/

/* -webkit-transition: width 2s;
    transition: width 2s;
    opacity: 0; */

/* } */

/* div.panel.show {
        /* -webkit-transition: width 2s; */

/* opacity: 1;
    max-height: 600px;  */

/* } */

.rotate-icon {
    -webkit-transform: rotate(-225deg);
}

button.accordion:after {
    content    : '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size  : 13px;
    color      : #777;
    float      : right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

/*********************************************************************
for profile picture on edit my profile.
*/

ul.profile-pic-hover {
    list-style-type: none;
    margin         : 0;
    padding        : 0;
    /*display      : inline-block;
    vertical-align : middle;*/
    /*text-align   : right;*/
    /*position     : relative;*/
}

div.avatar-img img {
    /* position      : absolute; */
    display       : inline-block;
    border-radius : 50%;
    height: 160px;
    width: 160px;
    vertical-align: middle;
    /* right         : -450px; */
}

div.patient-img img {
    position       : absolute;
    display        : inline-block;
    /*border-radius: 50%;*/
    height         : 75%;
    width          : 75%;
    vertical-align : left;
    /*right        : -450px;*/
}

ul.profile-pic-hover li {
    /*border-radius: 50%;*/
    display       : inline-block;
    vertical-align: middle;
    height: 160px;
    /* margin        : 0 1em 1em 0; */
    position      : relative;
    width         : 150px;
}

span.avatar-text {
    background        : rgba(0, 0, 0, 0.5);
    color             : white;
    cursor            : pointer;
    display           : table;
    height            : 150px;
    position          : absolute;
    width             : 150px;
    right             : -450px;
    margin-top        : -20px;
    margin-right      : 2px;
    border-radius     : 50%;
    opacity           : 0;
    transition        : opacity 0.3s linear;
    -moz-transition   : opacity 0.3s linear;
    -webkit-transition: opacity 0.3s linear;
}

span.avatar-text span {
    /*cursor: pointer;*/
    display       : table-cell;
    text-align    : center;
    vertical-align: middle;
}

#edit {
    background       : none;
    border           : none;
    /*text-decoration: underline;*/
}

ul.profile-pic-hover li:hover span.avatar-text {
    opacity        : 1;
    text-decoration: underline;
}

table {
    /*table-layout: fixed; */
    border-collapse: collapse;
    border-spacing : 0px;
    overflow-y     : scroll;
    overflow-x     : visible;
    width          : 100%;
}

td {
    /*width: 200px;*/
    width         : auto;
    height        : auto;
    /* font-size  : 10px; */
    padding       : 0;
    border        : 0;
    margin        : 0px;
    /*overflow    : scroll;
	conflicts with the calender page, comment for now until find aother better way for both to work*/
    /* white-space: nowrap; */
}

th {
    /* width: 100%; */
    /* position: relative; */
    /* font-size: 10px; */
    /* font-style: bold; */
    /* padding-top: 10px; */
    /* background-color: gray; */
    /*padding-bottom: 10px;*/
}

table,
td,
th {
    border: 1px solid black;
}

/* tr:hover {
    background-color: #f5f5f5;
} */

.modal-body ul {
    width              : 100%;
    /*750px;*/
    list-style-type    : none;
    list-style-position: outside;
    margin             : 0px;
    padding            : 0px;
}

.details {
    background-color: lightgrey;
    font-family     : "Arial Black", Helvetica, sans-serif;
    /*font-size     : 16em;*/
    color           : black;
    /*width         :150px;*/
    margin-left     : 15px;
    /*display       :inline-block;*/
    float           : left;
    /*padding       :3px;*/
}

details li {
    margin-left: 20px;
}

input:read-only {
    background-color: #eee9e9;
}

div.boxedDiv {
    border-style: solid;
    border-width: 1px;
    width       : 50%;
    min-width   : 350px;
}

.boxedDiv li {
    padding : 0px;
    position: relative;
}

.dataTables_wrapper .dataTables_filter {
    float: left;
}

#patientSection,
#WoundSection {
    padding-bottom: 20px;
}

#wound-location .wound-location-selected-img-wrapper {
    margin-top: 20px;
}

#wound-location .wound-orientation {
    border       : 3px solid #00000000;
    border-radius: 5px;
}

#wound-location .wound-orientation.selected {
    border-color: #6fe6da;
}

.alert {
    position   : fixed;
    top        : 50%;
    left       : 50%;
    margin-top : -30px;
    margin-left: -150px;
    z-index    : 1000;
    font-weight: bold;
    font-size  : 13px;
    width      : 300px;
    text-align: center;
}

/** override .alert */
.alert-normal {
    position   : relative;
    top        : unset;
    left       : unset;
    margin-top : unset;
    margin-left: unset;
    z-index    : initial;
    font-weight: initial;
    font-size: inherit;
    width      : initial;
    text-align : initial;
}

.alert-darkRed {
    color: #ffffff;
    background-color: #ff6262;
    border-color: #f4b8be;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-select {
    /* background-image     : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"); */
    background-position-x: right 0.75rem;
    /* background-position-y: center; */
    /* background-size      : 8px 10px; */
    /* background-repeat    : no-repeat; */
    /* background-attachment: initial; */
    /* background-origin    : initial; */
    /* background-clip      : initial; */
}

.line-height-0 {
    line-height: 0;
}

.line-height-1 {
    line-height: 1;
}

.font-90 {
    font-size: 90%;
}

.font-100 {
    font-size: 100%;
}

.position-left {
    left: 0;
}

.position-top {
    top: 0;
}

.screen-lid {
    background-color: #cccccc7a;
    z-index         : 1000;
}

.overflow-scrolling-touch {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling        : touch;
}

.oauth-mode .nav-item:not(.oauth-show) {
    display: none;
}

input.required:not(.filled),
select.required:not(.filled) {
    background-color: rgb(255, 254, 209);
}

.custom-control-input[type="radio"] {
    width: 100%;
}

.custom-control-label::before {
    top   : 0.05rem;
    width : 1.2rem;
    height: 1.2rem;
}

.custom-control-label::after {
    top   : 0.05rem;
    width : 1.2rem;
    height: 1.2rem;
}

.radio.checkmark {
    display         : block;
    position        : absolute;
    left            : -2.2rem;
    top             : 0;
    font-size       : 0;
    line-height     : 0;
    padding         : 5px;
    border-radius   : 20rem;
    border          : 1px solid #aeb5bd;
    /* color        : #fff; */
}

.radio.checkmark.active,
.active .radio.checkmark {
    border          : 1px solid #28a744;
    background-color: #28a744;
}

.radio.checkmark svg {
    opacity: 0;
}

.radio.checkmark.active svg,
.active .radio.checkmark svg {
    opacity: unset;
}

.badge.font-100 {
    font-size: 100%;
}

.border-arrow {
    display      : none;
    height       : 20px;
    width        : 40px;
    /* border-top: 20px solid blue; */
    border-color : #037bfe;
    border-style : solid;
    border-left  : 20px solid transparent;
    border-right : 20px solid transparent;
}

.border-arrow.down {
    border-top-width   : 20px;
    border-bottom-width: 0px;
    vertical-align     : top;
}

.border-arrow.up {
    border-top-width   : 0px;
    border-bottom-width: 20px;
    vertical-align     : bottom;
}

.up>.border-arrow.up,
.down>.border-arrow.down {
    display: inline-block;
}

.pm-selection-modal,
.pm-input-modal,
.pm-confirm-modal {
    background-color: rgba(58, 58, 58, 0.5);
}

.pm-input-modal .loading-wrapper,
.pm-selection-modal .loading-wrapper {
    position        : absolute;
    height          : 100%;
    width           : 100%;
    background-color: rgba(77, 77, 77, 0.37);
    text-align      : center;
    color           : #fff;
}

.pm-custom-popover {
    position      : relative;
    padding-bottom: 10px;
}

.pm-custom-popover::after {
    content      : "";
    display      : block;
    border-left  : 10px solid transparent;
    border-right : 10px solid transparent;
    position     : absolute;
    border-bottom: 0px;
    bottom       : 0px;
    border-style : solid;
}

.pm-custom-popover.warning::after {
    border-top: 10px solid #ffc106;
}


.rounded-left-0 {
    border-top-left-radius   : 0 !important;
    border-bottom-left-radius: 0 !important;
}

.rounded-right-0 {
    border-top-right-radius   : 0 !important;
    border-bottom-right-radius: 0 !important;
}

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

@media (max-width: 991px) {

    .modal-dialog.modal-xl {
        max-width: unset;
    }
}