@import "https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css";

html {
    height: 100%;
}
body {
    min-height: 100%;
    font-family: 'Titillium Web', sans-serif;
    background: url(../images/../images/paperbcg.png);
    background-repeat: repeat;
    overflow-x: hidden;
}
.pac-container {
    z-index: 1000000 !important;
}
.pac-container:after {
    height: 0;
    background-image: none !important;
}

/* Variables.less */
@headerBcg: #efefef;
@colorGreen: #2dcb70;

@mainColor: #30576d;
@mainColorDark: #dbdbdb;
@colorDefaultDark:#5c5c5c;

@menuLighter: #0f2e39;
@menuDarker: #08042b;

.shadowTwo{
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

/* search.less */
.searchRoot {
    position: absolute;
    top: 33px;
    width: 700px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    background-color: white;
    border: 1px solid silver;
    z-index: 10000;
    margin-top: 2px;
    margin-left: 0;

    .item {
        position: relative;
        float: left;
        padding: 10px;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid silver;
        text-decoration:none;
        list-style-type: none;
        p {
            font-size: 12pt;
            margin-bottom: 0 !important;
        }

        &:hover {
            color: white;
            background: @mainColor;
            cursor:pointer;
        }
             
        &:last-child{
             border-bottom:none!important;
        }
    }

    .shopItem {
        .item;

        color: black;
        background: white;
        cursor:pointer;

        &:hover {
            color: black;
            background: white;
            cursor:pointer;
        }

        p {
            width:30%;
        }
    }

    .itemWithBottomBorder {
        .shopItem;
             
        &:last-child{
            border-bottom: 1px solid silver!important;
        }
    }

    .oneColumnItem
    {
        .itemWithBottomBorder;

        p {
            width:98%;
        }

        p:first-child {
            width: 0;
        }

        p:last-child {
            width:0;
        }
    }

    .twoColumnItem
    {
        .itemWithBottomBorder;

        p {
            width:50%;
        }

        p:first-child {
            width:45%;
        }

        p:last-child {
            width: 0;
        }
    }

    .threeColumnItem
    {
        .itemWithBottomBorder;

        p:last-child {
            width:39%;
        }
    }

    .roleItem {
        .itemWithBottomBorder;

        p {
            width:99%;
        }

        p:first-child {
            width: 0;
        }

        p:last-child {
            width:0;
        }
    }

    .activityItem {
        .roleItem;

        p {
            width:30%;
        }

        p:last-child {
            width:39%;
        }
    }

    .personItem {
        .roleItem;

        p {
            width:50%;
        }

        p:last-child {
            width:45%;
        }
    }

    .itemSelected {
        .item;

        color: white;
        background: @mainColor;
        cursor:pointer;

        &:hover {
            color: white;
            background: @mainColor;
            cursor:pointer;
        }
    }

    .itemActive {
         color: white;
         background: @mainColor;
    }

    .searchFooter {
        position: relative;
        float: left;
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        border-top: 1px solid silver;
        p{
            font-size:10pt;
            font-style:italic;
            margin-bottom:0;
            display:inline-block;
        }
        span{
            float:right;         
        }
        a{
            font-size:10pt;
        }

    }
}

/* boxStyle.less */
.box {
    position: relative;
    border-radius: 3px;
    background: @headerBcg;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.box.box-primary {
    border-top-color: @mainColor;
}
.box.box-info {
    border-top-color: #00c0ef
}
.box.box-danger {
    border-top-color: #dd4b39
}
.box.box-warning {
    border-top-color: #f39c12
}
.box.box-success {
    border-top-color: #00a65a
}
.box.box-default {
    border-top-color: #d2d6de
}
.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
    display: none
}
.box .nav-stacked>li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0
}
.box .nav-stacked>li:last-of-type {
    border-bottom: none
}
.box.height-control .box-body {
    max-height: 300px;
    overflow: auto
}
.box .border-right {
    border-right: 1px solid #f4f4f4
}
.box .border-left {
    border-left: 1px solid #f4f4f4
}
.box.box-solid {
    border-top: 0
}
.box.box-solid>.box-header .btn.btn-default {
    background: transparent
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
    background: rgba(0, 0, 0, 0.1)
}
.box.box-solid.box-default {
    border: 1px solid #d2d6de
}
.box.box-solid.box-default>.box-header {
    color: #444;
    background: #d2d6de;
    background-color: #d2d6de
}
.box.box-solid.box-default>.box-header a,
.box.box-solid.box-default>.box-header .btn {
    color: #444
}
.box.box-solid.box-primary {
    border: 1px solid  @mainColor;
}
.box.box-solid.box-primary>.box-header {
    color: #fff;
    background: @mainColor;
    background-color:  @mainColor;
}
.box.box-solid.box-primary>.box-header a,
.box.box-solid.box-primary>.box-header .btn {
    color: #fff
}
.box.box-solid.box-info {
    border: 1px solid #00c0ef
}
.box.box-solid.box-info>.box-header {
    color: #fff;
    background: #00c0ef;
    background-color: #00c0ef
}
.box.box-solid.box-info>.box-header a,
.box.box-solid.box-info>.box-header .btn {
    color: #fff
}
.box.box-solid.box-danger {
    border: 1px solid #dd4b39
}
.box.box-solid.box-danger>.box-header {
    color: #fff;
    background: #dd4b39;
    background-color: #dd4b39
}
.box.box-solid.box-danger>.box-header a,
.box.box-solid.box-danger>.box-header .btn {
    color: #fff
}
.box.box-solid.box-warning {
    border: 1px solid #f39c12
}
.box.box-solid.box-warning>.box-header {
    color: #fff;
    background: #f39c12;
    background-color: #f39c12
}
.box.box-solid.box-warning>.box-header a,
.box.box-solid.box-warning>.box-header .btn {
    color: #fff
}
.box.box-solid.box-success {
    border: 1px solid #00a65a
}
.box.box-solid.box-success>.box-header {
    color: #fff;
    background: #00a65a;
    background-color: #00a65a
}
.box.box-solid.box-success>.box-header a,
.box.box-solid.box-success>.box-header .btn {
    color: #fff
}
.box.box-solid>.box-header>.box-tools .btn {
    border: 0;
    box-shadow: none
}
.box.box-solid[class*='bg']>.box-header {
    color: #fff
}
.box .box-group>.box {
    margin-bottom: 5px
}
.box .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em
}
.box>.overlay,
.overlay-wrapper>.overlay,
.box>.loading-img,
.overlay-wrapper>.loading-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.box .overlay,
.overlay-wrapper .overlay {
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 3px
}
.box .overlay>.fa,
.overlay-wrapper .overlay>.fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: #000;
    font-size: 30px
}
.box .overlay.dark,
.overlay-wrapper .overlay.dark {
    background: rgba(0, 0, 0, 0.5)
}
.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
    content: " ";
    display: table
}
.box-header:after,
.box-body:after,
.box-footer:after {
    clear: both
}
.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
    border-bottom: 2px solid white;
    &.main-color-border{
         border-bottom: 1px solid @mainColor!important;
    }
}
.box-header.with-border {
    border-bottom: 1px solid #f4f4f4
}
.collapsed-box .box-header.with-border {
    border-bottom: none
}
.box-header>.fa,
.box-header>.glyphicon,
.box-header>.ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1
}
.box-header>.fa,
.box-header>.glyphicon,
.box-header>.ion {
    margin-right: 5px
}
.box-header>.box-tools {
    position: absolute;
    right: 10px;
    top: 5px
}
.box-header>.box-tools [data-toggle="tooltip"] {
    position: relative
}
.box-header>.box-tools.pull-right .dropdown-menu {
    right: 0;
    left: auto
}
.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3
}
.open .btn-box-tool,
.btn-box-tool:hover {
    color: #606c84
}
.btn-box-tool.btn:active {
    box-shadow: none
}
.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px
}
.no-header .box-body {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px
}
.box-body>.table {
    margin-bottom: 0
}
.box-body .fc {
    margin-top: 5px
}
.box-body .full-width-chart {
    margin: -19px
}
.box-body.no-padding .full-width-chart {
    margin: -9px
}
.box-body .box-pane {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px
}
.box-body .box-pane-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0
}
.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #fff
}

/* header.less */
.rotate {
   
    -webkit-transform: rotate(-90deg);   
    -moz-transform: rotate(-90deg);   
    -ms-transform: rotate(-90deg);   
    -o-transform: rotate(-90deg);   
    transform: rotate(-90deg);    
    margin-bottom: 0;

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    span{
       -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);   
    -ms-transform: rotate(90deg);   
    -o-transform: rotate(90deg);   
    transform: rotate(90deg);        
    }
}
.white{
    color:white;
}



.border-right{  
    border-right:1px solid silver;
}
.border-left{  
    border-left:1px solid silver;
}
.border-bottom{  
    border-bottom:1px solid silver;
}
.border-top{  
    border-top:1px solid silver;
}
.spaceRight{
    margin-right:10px;
}
.spaceLeft{
    margin-left:10px;
}
.topMargin20{
    margin-top:20px;
}

.shadowed{
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.43);
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.43);
}

.highlight {
         border: 1px dashed silver;        
         background-color: rgba(0,0,0,.1);
}

.InsetImgShadow {
    background: -webkit-radial-gradient(50% 0%,50% 12px,#aaa 0%,rgba(0,0,0,0) 100%);
}
.labelParagraph{
        margin-bottom: 0!important;
        margin-top: 5px;
        float:left;
}
.paragraphInline{
    display:inline-block;
    float:left;
    margin-right:2px;
}

/* Pulled left inline block inputs */
.inPulledLeft(@width : 100%) {    
    position: relative;
    float: left !important;
    width: @width;
    font-size: 10pt;   
    border:1px solid silver;  
}

.inPullLeft100{
    .inPulledLeft(100%);
}
.inPullLeft90{
    .inPulledLeft(90%);
}
.inPullLeft80{
    .inPulledLeft(80%);
}
.inPullLeft70{
    .inPulledLeft(70%);
}
.inPullLeft60{
    .inPulledLeft(60%);
}
.inPullLeft50{
    .inPulledLeft(50%);
}

/* No padding component attr */
.noPaddingWide{
    padding-right: 0!important;
    padding-left:  0!important;
}
.noPaddingTall{
    padding-top: 0!important;
    padding-bottom:  0!important;
}
.noPadding{
    padding: 0!important;   
}

/* Focus and mouse hover effects */
.focusHoverShadow {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    &:focus {
        .shadowed;
    }

    &:hover {
        .shadowed;
    }
}

.focusHoverScale(@value : 1.05) {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    &:focus {
        -moz-transform: scale(@value);
        -ms-transform: scale(@value);
        -o-transform: scale(@value);
        -webkit-transform: scale(@value);
        transform: scale(@value);
    } 
}

.text-to-right{
    text-align:right!important;
    padding-right:5px;
}
.text-to-center{
    text-align:center!important;
    padding-right:5px;
}
.text-to-left{
    text-align:left!important;
    padding-right:5px;
}

.round-button{
    padding: 10px 10px;
    display: inline-block;
    margin:12px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    user-select:none;

    &:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        cursor:pointer;
    }
}

.fg-white{
    color:white!important;
}
.bg-main{
    background:@mainColor!important;
}

.bg-green{
    background:green!important;
    border:1px solid green!important;
}

.bg-orange{
    background:orange!important;
    border:1px solid orange!important;
}
.bg-blue{
    background:dodgerblue!important;
     border:1px solid dodgerblue!important;
}
.bg-red{
    background:red!important;
     border:1px solid red!important;
}
.bg-white{
    background:white!important;
    border:1px solid silver!important;
}
.bg-blue-border-white{
    background:dodgerblue!important;
     border:1px solid white!important;
}

.inactiveButton{
    border: 1px solid silver;
    color: silver;
}

.inputPassword{
    width:100%;
    padding:8px;
}

/* Customer.less */
.customerName {
    font-size: 35pt;
    text-align: center;
    margin-top: 0;

    .iSex{
        color:@mainColor;
    }

    i {
        font-size: 30pt;
        margin-bottom: 6px;
    }    
}

.imgHolder {
    .shadowed;
    position: relative;
    width: 100px;
    height: 100px;
    border: 4px solid @mainColor;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    margin: 20px auto;

    &:hover {
        cursor: pointer;
    }

    img {
        -webkit-user-drag: none;        
        user-drag: none;
        -moz-user-select: none;       
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    user-select: none;
} 

 .tall {
width: 100%;     
height: auto;
margin-top:auto;
}
.wide {
height: 100%;
width: auto;
margin-left:auto;
}

.removeRightBorder {
    border-right: 0 !important;
}

.minHeight {
    min-height: 648px;
}

.customerSex{
     text-align:center; 
    i{
        font-size: 24pt;
        float: left;
        color: white;
        background: @mainColor;
        padding: 15px;
        margin-right: 10px;
        width:67px;
    }
    p{
        font-size: 22pt;
        text-align:left;    
        padding-top: 8px;
    }
}
.customerPhone {
    text-align: center;

    i {
        font-size: 24pt;
        float: left;
        color: white;
        background: @mainColor;
        padding: 15px;
        margin-right: 10px;
        width: 67px;
    }

    p {
        font-size: 22pt;
        text-align: left;
        padding-top: 8px;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    a {
        color: #333 !important;
        text-decoration: none !important;

        &:hover {
            text-decoration: none !important;
        }
    }
}
.topWhite{
    border-top:2px solid white;
    padding-top: 23px;
}
.additionalInfo{
    
    font-size:14pt!important;

    td:first-child{
        width:40%;
        padding:5px;
        color:@mainColor;
    }
    td:last-child{
        width:60%;
        padding:5px;
    }
}

.silver{
    color:silver;
}

.customerNumber{
    color: @mainColor;
    font-size: 22pt;

    margin-bottom:0;
    b{
        color:#333;
    }
}

.historyRowMain{
    
    margin:0 20px;   
    background-color:white;   
    border:1px solid #e8e8e8;
    font-size: 12pt;
    margin-bottom: 17px;
    border-left:3px solid @mainColor;
    
    .col-xs-7{
        border-left:1px solid #dcdcdc;      
    }    

   &:hover{
       cursor:pointer;
   }
}

.note{
    padding: 10px;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    margin-bottom:5px!important;
    span{
        color: gray;
        font-size: 8pt;
    }
    &:last-child{
        margin-bottom:20px!important;
    }
}

.noteTxtArea{
    width:100%;
    border-width: 0px 0px 1px;
    border-style: none none solid;
    border-color: white white rgba(48, 87, 109, 0.309804);
    border-image: initial;
    overflow: hidden;
    padding: 10px;
    margin: 8px 0px 4px;
    outline: none;
    background-color: rgba(255, 216, 0, 0.156863);
    min-height:50px;
}

.noteEditArea {
    width:70%;
    border-width: 0px 0px 1px;
    border-style: none none solid;
    border-color: white white rgba(48, 87, 109, 0.309804);
    border-image: initial;
    overflow: hidden;
    padding: 10px;
    margin: 8px 0px 4px;
    margin-left: 20px;
    outline: none;
    background-color: rgba(255, 216, 0, 0.156863);
    min-height:50px;
    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.43);
}

.noteButtonRight {
    display: none;
}

.noteButtonLeft {
    display: none;
}

div.note:hover .noteButtonRight {
    position: absolute; 
    right: 20px; 
    top: 30px; 
    cursor: pointer;
    display: inline-block;
}

div.note:hover .noteButtonLeft {
    position: absolute; 
    right: 50px; 
    top: 30px; 
    cursor: pointer;
    display: inline-block;
}

.main-color{
    background-color: @mainColor;
    border-color: @mainColor!important;
}

.main-fore-color{
    color: @mainColor;
}

.toggle{
    cursor: pointer;
}

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

.customer-pointer-cursor{
    cursor: pointer;
}

.customer-inactive{
    -ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */
    transform: rotate(-10deg);
    font-size: 110pt;
    margin-left: 80px;
    color: lightgrey;
    position:absolute;
    display:block!important;
}

.dont-display{
    display:none;
}

.seek-customer-field{
    margin-top:10px;
}

.seek-customer-font-size {
    font-size: 18px;
}

.seek-customer-label-style {
    font-size: 14px; 
    line-height: 26.6667px;
}

.seek-customer-icon-text-style {
    font-size: 18px; 
    position: relative; 
    top: -6px;
}

.seekCustomerField{
    .customerField;
    p{
        font-size:14px;
        margin-top: 3px;
    }   
}

.full-width{
    width: 100%;
}

.half-width{
    width: 50%;
}

.width-30{
    width: 30%;
}

.width-40{
    width: 40%;
}

.no-padding{
    padding:0;
}

.customerLargeField{
    .customerField;
    p {
        font-size: 18pt;
        }
}

.customerLargestField{
    .customerField;
    p {
        font-size: 22pt;
        }
}

.customerField {
    i {
        float: left;
        color: white;
        background: @mainColor;
        padding: 15px;
        margin-right: 10px;
        margin-bottom: 5px;
        width:44px;
    }

    p {
        font-size: 14pt;
        text-align: left;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        margin: 0;
    }

    a {
        color: #333 !important;
        text-decoration: none !important;

        &:hover {
            text-decoration: none !important;
        }
    }
}

.box-header{
    font-size:14pt;
}

.dataItem{
    overflow:hidden;   
    margin-bottom: 2px;
    p{
        margin-bottom:0!important;
        font-size: 14pt;
    }
    h3{
            margin-top: 0;
    }
}

.collapsible-header{
    border-left:2px solid @mainColor;

    .faMainIcon{
        color:@mainColor!important;
    }
}
.journalPreviewBtn{
    
    display:none!important;
}

.journalCard{
    background-color: white;
    padding: 10px;
    // overflow: hidden;
    display: flex;
    margin: 4px;
    margin-left: 40px;
    margin-right: 40px;
    transition: background 0.1s ease;

    &:hover{
        background-color:#f8f8f8;
        cursor:pointer;
        
        .journalPreviewBtn{
            display:inline-block!important;
        }
    }
}

.customer-next-appointment-modal {
    border: 1px solid black;
}
.customer-next-appointment, 
.customer-next-appointment:hover,
.customer-next-appointment:focus,
.customer-next-appointment:visited,
.customer-next-appointment:active {
   background-color: @mainColor !important;
   color: white;
}

/* loader.less */
.mainLoader {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 900000;
}
.loaderHolder {
	width: 100px;
	height: 100px;
	background-color: white;
	position: relative;
	margin: auto;
	margin-top: 400px;
	padding-top: 20px;
	border-radius: 50%;
	border: 1px solid silver;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.loader {
	margin: 10px auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 1.1em solid rgba(62, 62, 62, 0.2);
	border-right: 1.1em solid rgba(62, 62, 62, 0.2);
	border-bottom: 1.1em solid rgba(62, 62, 62, 0.2);
	border-left: 1.1em solid #3e3e3e;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	-moz-animation: load8 1.1s infinite linear;
	-o-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
	border-radius: 50%;
	width: 4em;
	height: 4em;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-moz-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* scrollStyle.less */
.scrollStyle::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: rgba(85, 85, 85, 0.30);
}

.scrollStyle::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.scrollStyle::-webkit-scrollbar-thumb
{
	 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

/* sideMenuButtons.less */
.sideBtn {
	position: fixed;
	right: 0;
	width: 80px;
	height: 80px;
	background-color: #1a2226;
	z-index: 10;
	margin-right: -50px;
	-moz-transition: margin 0.2s;
	-o-transition: margin 0.2s;
	-webkit-transition: margin 0.2s;
	transition: margin 0.2s;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	p {
		width: 80px;
		height: 30px;
		position: absolute;
		top: 25px;
		left: -20px;
		color: white;
	}
	&:hover {
		margin-right: 0;
		cursor: pointer;
	}
}

.correspondences {
    top: 195px;
    p {
        color: #99ff33;
    }
    i {
        position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
    }
}

.calendar {
	top: 280px;
	p {
		color: orange;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.sms {
	top: 365px;
	p {
          color: #25b225;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.tasks {
	top: 450px;
	p {
          color: #94ccfc;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.links {
	top: 535px;
	p {
		color: white;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.draftJournals {
	top: 620px;
	p {
		color: #d5c08c;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.draftOrders {
	top: 705px;
	p {
		color: #00c0ef;
	}
	i {
		position: relative;
		margin: auto auto;
		top: 26%;
		font-size: 25pt;
		left: 13%;
		color: #fff;
	}
}

.iconHolder {
	width: 50px;
	height: 100%;
	position: relative;
	float: left;
}

.textHolder {
	width: 30px;
	height: 100%;
	position: relative;
	float: left;
}

/* sideMenu.less */
.sideBar {
    position: fixed;
    top: 97px;
    right: -400px;
    bottom: 0;
    width: 400px;
    background-color: #222d32;
    -moz-transition: right 0.3s;
    -o-transition: right 0.3s;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
    color:white;
    padding: 30px;
    z-index: 10000!important;
}

.wideSideBar {
    position: fixed;
    top: 97px;
    right: -1150px;
    bottom: 0;
    width: 1150px;
    background-color: #222d32;
    -moz-transition: right 0.45s;
    -o-transition: right 0.45s;
    -webkit-transition: right 0.45s;
    transition: right 0.45s;
    color:white;
    padding: 30px;
    z-index: 10000!important;

    .action-btn {
        width: 55px;
        height: 32px;
        padding: 4px;
        margin-left: -10px;
        font-size: 14px;
        font-weight: 600;
    }
}

.sideBarOpen{
    right: 0;
}

.todaysCustomersStyles {
    line-height: 2.5;
    border: 1px solid white;
    margin-top: 15px;
}

.todaysCustomerButtonRowStyles, .correspondencesButtonRowStyles {
    padding-bottom: 15px;
    border-bottom: 1px solid white;
}

.todaysCustomersPositionImg {
    position: relative; 
    top: 10px;
}

.correspondencesStyles {
    border: 1px solid white;
    margin-top: 15px;
    padding: 10px;

    .correspondence-text {
        border-top: 1px solid white;
        margin-top: 10px;
    }
    .correspondence-buttons {
        display: flex;
    }
}

.sideBarItem{
    h2{
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
    i{
        float:right; 
        &:hover{
            cursor:pointer;
        }        
    }
    span{
        display:inline-block;
    }
    ul {
        overflow: auto;
        height: calc(100vh - 235px);
	    li {
		    position: relative;
            list-style-type: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
		    p {
			    .checkOrWarning {
				    position: absolute;
				    top: 0;
				    left: 250px;
			    }
		    }
	    }
    }
}

.wideSideBarItem {
    h2 {
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
    i.wideSideBarIcon {
        float:right; 
        &:hover{
            cursor:pointer;
        }
    }
    span.wideSideBarTitle {
        display: inline-block;
    }
}

.sideBarContent {
    margin-top: 30px;
    position: relative;
    float: left;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: -14px;
    overflow: auto;

    .fa {
        float: left !important;
        margin-right: 10px;
        margin-top: 7px;
    }

    ul {
        padding-left: 5px;

        li {
            display: block;
            margin-top: 10px;

            &.draftJournalItem {
                color: #bfbfbf;
                font-size: 14pt;
                -moz-transition: padding 0.3s;
                -o-transition: padding 0.3s;
                -webkit-transition: padding 0.3s;
                transition: padding 0.3s;
                border-bottom: 1px solid #696969;
                -moz-user-select: none !important;
                -ms-user-select: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;

                &:hover {
                    color: white;
                    text-decoration: none;
                    padding-left: 15px;
                    border-left: 3px solid #fff;
                    cursor: pointer;
                    -moz-user-select: none !important;
                    -ms-user-select: none !important;
                    -webkit-user-select: none !important;
                    user-select: none !important;
                }

                &:active {
                    text-decoration: none;
                }
            }
        }
    }

    a {
        color: #bfbfbf;
        font-size: 16pt;
        -moz-transition: padding 0.3s;
        -o-transition: padding 0.3s;
        -webkit-transition: padding 0.3s;
        transition: padding 0.3s;

        &:hover {
            color: white;
            text-decoration: none;
            padding-left: 15px;
            border-left: 3px solid #fff;
        }

        &:active {
            text-decoration: none;
        }
    }
}

.sideBarContentCorrespondence {
    max-height: 700px;
    overflow-y: auto;
    padding-right: 5px;
    padding-bottom: 10px;
}

.sideBarContentTasks {
    width: 385px;
    margin-left: -15px;
    padding-right: 10px;
    max-height: 85%;
    overflow-x: hidden;

    .resetRowMargins {
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* header.less */
#header {
    position:fixed;
    z-index: 10000;
    .shadowed;
    background-color: @headerBcg;   
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;   
    width:100%;
    padding-bottom: 0;   
    float:left;
    .mainRoll{
        margin-top:10px;
    }
    /* USER MENU */
    .hoLogo {
        position: relative;
        float: right;
    }  

    .IconRoot {
        position: relative;
        float: left;  
        z-index: 1000; 
        outline: none;    
        .fa-align-justify{
             font-size: 25px;
             margin-top: 4px;
        }
        padding-right: 20px;
        color: @colorDefaultDark;
        &:hover {
            cursor: pointer;
        }

        input{
            font-size:12pt;
            position: absolute;
            margin-top:2px;
            padding:3px 5px;
            border:1px solid silver;
            border-radius:5px;
        }
    }
        .IconRootSearch {
        position: relative;
        float: left;  
        z-index: 1000;     
        .fa-align-justify{
             font-size: 24px;
             margin-top: 4px;
        }
        padding-right: 5px;
        color: @colorDefaultDark;
        width:80%;
        &:hover {
            cursor: pointer;
        }
        select{
            font-size:12pt;
            position: relative;
            margin-top:2px;
            padding-top:2px;
            padding-bottom:2px;
            border:1px solid silver;
            border-radius:5px;
            width:35%;
        }

        input{
            font-size:12pt;
            position: relative;
            margin-top:2px;
            margin-left:3px;
            padding:3px 5px;
            border:1px solid silver;
            border-radius:5px;
            width:62%;
        }
    }  
}

.subHeader{
    position:relative;
    float:left;
    width:100%;   
  
    color:white;  
    margin-top: 10px;
    background: @mainColor; 

   
}

#mainMenu {
    padding: 20px;   
    overflow: hidden;  
    display: none;
    background: @menuDarker; /*  | Old browsers */
    background: -moz-linear-gradient(top, @menuLighter 0%, @menuDarker 100%); /*  | FF3.6-15 */
    background: -webkit-linear-gradient(top, @menuLighter 0%, @menuDarker 100%); /*  | Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, @menuLighter 0%, @menuDarker 100%); /*  | W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */   

    p {
        margin: 10px 0;
        font-size: 14pt;
    }

    a {
        color: #d1d1d1 !important;
        display: block;
        text-decoration: none;
        font-size:12pt;
        -moz-transition: padding 0.3s;
        -o-transition: padding 0.3s;
        -webkit-transition: padding 0.3s;
        transition: padding 0.3s;
        line-height: 20pt;
        &:hover {
            color: white !important;
            cursor:pointer;
            padding-left:5px;
        }
    }
}

.menu-pull-right{
    float:right!important;
    padding: 0 10px;  
}

.menu-pull-left{
    float:left!important;
    padding: 0 10px;  
}

.user{
    color:@colorDefaultDark;
    padding-top: 2px;
    font-size:16pt;
    p{
        font-size:12pt;
        margin: 0;
        padding: 5px 0;
    }

    &:hover{
        cursor:pointer;
    }
}

.shop{
    .user;

    &:hover{
        cursor:default;
    }
}

/* smsDialog.less */
.smsBody{
    max-height:400px;
    overflow-y:auto;
}
.sentMsg {
    position: relative;
    float: right;
    width: 80%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px 20px;
    background-color:  #d8d8d8;
    color: black;
    margin-bottom:20px;
}
.recivedMsg {
    position: relative;
    float: left;
    width: 80%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px 20px;
    background-color: @mainColor;
    color: white;
    margin-bottom:20px;
}

.msgStatus{
     font-weight:lighter;
     font-style:italic;
}

.loadMoreBtn{
    width: 100%;                                                                        
    margin-bottom: 25px;                                                                                       
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid silver;
    padding: 5px;  
}

.loadMoreButtonOnHistory{
    width: 96%;                                                                        
    margin: 24px;
    border: 0;
    border-bottom: 1px solid silver;
    height: 50px;
}

.smsRightEdge{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color:  #d8d8d8  transparent transparent transparent;
    position: absolute;
    right: -13px;
    top: 0px;
}

.smsLeftEdge{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent  @mainColor transparent transparent;
    position: absolute;
    left: -15px;
    top: 0;
}

/* checkBoxes.less */
input[type=checkbox].css-checkbox {
    display:none;
 }
 
 input[type=checkbox].css-checkbox + label.css-label {
     padding-left: 24px;
     height: 17px;
     display: inline-block;
     line-height: 17px;
     background-repeat: no-repeat;
     background-position: 0 0;
     font-size: 17px;
     vertical-align: middle;
     cursor: pointer;
     color: #bfbfbf;
     -moz-transition: font-size 0.3s;
     -o-transition: font-size 0.3s;
     -webkit-transition: font-size 0.3s;
     transition: font-size 0.3s;
 
     &:hover {
         color: white;
         font-size:16pt;
     }
 }
 
 input[type=checkbox].css-checkbox:checked + label.css-label {
     background-position: 0 -17px;    
 }
 
 label.css-label {
     background-image:url(../images/checkboxBcg.png);
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

/* fastLinksContainer.less */
[ng-drag]{
    -moz-user-select: -moz-none;      
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[ng-drop].drag-enter{
    border:dashed 2px gray;
    border-radius:5px;
}
[ng-drag].dragging{
     position: relative;
    z-index:100000;
}

.fastLinksContainer {
min-height: 34px;

border-left: 1px ridge #CECDCD;


p{
    color: #a4a4a4;
    margin-bottom: 0;
    margin-top: 6px;
}
}
[ng-drop] div {
.shadowTwo;
border-radius: 3px;
position: relative;
background: @mainColor;
color: white;
display: inline-block;
font-size: 14pt;
margin-right: 15px;
padding: 5px;



a {
    color: white;
    text-decoration: none !important;

    &:hover {
        text-decoration: none !important;
    }
}

span {
        position: absolute;
        top: -7px;
        right: -9px;
        font-size: 11pt;
        display: none;
        background: red;
        padding: 3px 4px;
        border-radius: 50%;
        display:none;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
}
}
.editableNgDrop {
-moz-animation-fill-mode: none!important;
-o-animation-fill-mode: none!important;
-webkit-animation-fill-mode: none!important;
animation-fill-mode: none!important;

span {
    display: inline-block !important;
}
}

/* radioButtons.less */
.ovrdRadio {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
  }
  
  /* One radio button per line */
  label {
    display: block;
    cursor: pointer;
    line-height: 2.5;
    font-size: 1.5em;
    font-weight:normal;
  }
  
  .ovrdRadio + span {
    display: block;
  }
  
  /* the basic, unchecked style */
  .ovrdRadio + span:before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -0.25em;
      border-radius: 1em;
      border: 0.125em solid #fff;
      box-shadow: 0 0 0 0.15em #000;
      margin-right: 0.75em;
      -moz-transition: 0.5s ease all;
      -o-transition: 0.5s ease all;
      -webkit-transition: 0.5s ease all;
      transition: 0.5s ease all;
  }
  
  /* the checked style using the :checked pseudo class */
  .ovrdRadio:checked + span:before {
    background: @mainColor;
    box-shadow: 0 0 0 0.25em #000;
  }

/* seakTimeslots.less */
.timeSlot {
    .shadowTwo;
    background-color: @mainColor;
    color: #fff;
    width: 250px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin: 15px;
    position: relative;
    float: left;
    -moz-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    p {
        margin-bottom: 0;
        margin-top: 5px;


        b {
            float: right;
        }
    }

    h3 {
        font-size: 20pt;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.5);
        margin-top: 0;
    }

    &:hover {
        cursor: pointer;
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.seelTimeSlotSelect{
        padding: 7px;
        width: 95%;
}
.marginBottom10{   
        margin-bottom:10px;
        font-size: 14pt;
}


.slider-selection {
	background: @mainColor;
}
.slider-handle {
	background: @mainColor;
    box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
.slider-horizontal{
    width:100%!important;
}
 .btnShowResult {
    background:@mainColor;
    color: white;
    border: none;
    padding: 5px 20px;
    float: right;
 }

/* journal.less */
.headerName {
    margin-right: -10px;
    margin-left: -10px;
    margin-top: -10px;
    margin-bottom: 10px;
    background-color: white;
    border-bottom: 1px solid @mainColor;
    overflow: hidden;

    h3 {
        text-align: center;
        margin-top: 11px;
    }
}

.localClientButtonStyle {
    border: 1px solid #adadad; 
    background-color: white; 
    width: 100%;
}

div.input-group span.removeHasErrorStyle {
    color: #333; 
    background-color: transparent; 
}

div.input-group span.removeReminderHasErrorStyle {
    color: #333; 
    background-color: #FFF; 
}
.loaderStyle {
    background-color: white;
    left: 75px;
    top: -45px;
    position: absolute;
}

.loaderTodaysStyle {
    background-color: white;
    left: 30px;
    top: -45px;
    position: absolute;
}

.positonSpan {
    position: relative;
}

.headerMainInfo {
    padding-top: 10px;
    margin-right: -10px;
    margin-left: -10px;
    margin-top: -10px;
    overflow: hidden;
}

.journalLeftBody {
    background-color: #222d32;
    border-top: 2px solid @mainColor;
}

.fix-left-menu {
    position: fixed;
    overflow: auto;
    height: calc(100vh - 180px);
}

.journalInput {
    padding: 3px;
    border: 1px solid silver;
}

.blockParagraph {
    display: inline-block;
    float: left;
    padding: 5px;
}


.whiteBodyAndInsetShadow {
    .InsetImgShadow;
    margin: -10px -10px 10px -10px;
    padding-top: 10px;
    background-color: white;
    border-bottom: 1px solid @mainColor;
    overflow: hidden;

    h3 {
        text-align: center;
        margin-top: 11px;
    }
}

.mainColoredText {
    background-color: @mainColor;
    color: white;
    padding: 5px;
}

.mainColorBackground {
    background-color: @mainColor!important;
}

.refrCheckbox {
    label {
        line-height: 1.5 !important;
        font-size: 16pt;
    }
}

.pre-wrap {
    white-space: pre-wrap;
}

.break-word {
    word-break: break-word;
}

/* input background images styles */
.jiBcgH {
    background-image: url('../images/journal-refractions/clinicalH.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    border: 1px solid silver;
    width: 100px;
}

.jiBcgV {
    background-image: url('../images/journal-refractions/clinicalV.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    border: 1px solid silver;
    width: 100px;
}

.refractionTable {
    position: relative;
    float: left;
    width: 100%;
    font-size: 10pt;

    tr {
        border-bottom: 1px solid silver;
    }

    td {
        width: 11%;
    }

    input[type="text"] {
        width: 99% !important;
         border: 1px solid silver;
    }

    input[type="button"] {
        width: 50% !important;
        float: right;
    }
}

.refractionTableCL {
    position: relative;
    float: left;
    width: 100%;
    font-size: 10pt;

    tr {
        border-bottom: 1px solid silver;
    }

    td {
        width: 10%;
    }

    input[type="text"] {
        width: 99% !important;        
        border: 1px solid silver;
    }

    input[type="button"] {
        width: 50% !important;
        float: right;
    }
}

#tableBinCL {
    font-size: 10pt;
}

.refractionTableBin {
    .refractionTable;

    tbody {
        td {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
    input[type="text"] {
        width: 99% !important;        
        border: 1px solid silver;
    }
}



.jPrism {
    border: none !important;
    display: none;
}

.jPrismCL {
    border: none !important;
    display: none;
}

.jPrismFake {
}

.jGradient {
    background-color: @mainColor;
}

/* SUB BOXES */
.subbox-header {
    padding: 10px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid silver;
    margin-left: 15px;
    margin-right: 15px;

    p {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 0;
    }
}

.subbox-body {
    .jClinical;
    .InsetImgShadow;
    padding: 10px;
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid silver;
    border-top: none;
}

.jClinical {
    textarea {
        width: 100%;
        border: 1px solid silver;
        .focusHoverShadow;
        .focusHoverScale(1.03);
        font-size: 10pt;
    }
}

.classicInput {
    padding-left: 5px;
}



.jiBcgCm {
    background-image: url('../images/journal-refractions/Cm.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 35px;
    border: 1px solid silver;
    text-align: right;
}

.jiBcgMm {
    background-image: url('../images/journal-refractions/clinicalMM.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 17px;
    border: 1px solid silver;
    text-align: right;
    font-size: 11pt;
}

.jiBcgO {
    background-image: url('../images/journal-refractions/clinicalO.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 17px;
    border: 1px solid silver;
    text-align: right;
    font-size: 11pt;
}

.jiBcgIrisDia {
    background-image: url('../images/journal-refractions/clinicalIrisDia.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 35px;
    border: 1px solid silver;
    text-align: right;
    font-size: 11pt;
}

.jiBcgPupilDia {
    background-image: url('../images/journal-refractions/clinicalPupilDia.jpg');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 35px;
    border: 1px solid silver;
    text-align: right;
    font-size: 11pt;
}

.jiBcgClinicalH {
    background-image: url('../images/journal-refractions/clinicalH.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalV {
    background-image: url('../images/journal-refractions/clinicalV.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalBin {
    background-image: url('../images/journal-refractions/clinicalBin.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalA {
    background-image: url('../images/journal-refractions/clinicalA.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalN {
    background-image: url('../images/journal-refractions/clinicalN.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 28px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalDir {
    background-image: url('../images/journal-refractions/clinicalDir.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 45px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalIndir {
    background-image: url('../images/journal-refractions/clinicalIndir.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 45px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalNaer {
    background-image: url('../images/journal-refractions/clinicalNaer.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 45px;
    border: 1px solid silver;
    text-align: left;
}

.jiBcgClinicalRAPD {
    background-image: url('../images/journal-refractions/clinicalRAPD.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 45px;
    border: 1px solid silver;
    text-align: left;
}


.lensesBox {
    background: white;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin-bottom: 20px;


    select {
        font-size: 10pt;
        color: #444444;
    }
}

.mainLense {
    border-radius: 3px;
    border-left: 3px solid dodgerblue;
}

.extraLense {
    border-radius: 3px;
    border-left: 3px solid orange;
}


.journalDraftHomeBtn {
    position: fixed;
    right: 10px;
    bottom: 120px;
    border-radius: 50%;
    height: 60px;
    width: 60px;   
    background-color: #1a2226; 

    &:hover{
        cursor:pointer;      
    }
}


.journal-preview-p{
    float:left;
    width:95%;
    border-bottom:1px solid silver;
    text-align:right;    
}

.prismLetters {
    padding: 0 2px 0 10px;
    width: 10px!important;
}

.contact-lenses-fields {
    position:relative;
    float:left;
    width:14.28%;
}


/* New journal classes */
.journal-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-top: 3px solid #30576d;
    border-radius: 4px;
    background-color: white;
}

.journal-header-section {                     
    padding: 12px;
    font-size: 17px;    
}

.journal-date-section {
    background-color: #EFEFEF;
    padding: 12px 12px 5px 12px;
    font-size: 17px;    
    border-top: 1px solid #30576d;
    border-bottom: 2px solid #30576d;
}

.journal-form-section {
    padding: 12px;

    &.form-horizontal {
        .control-label{
            text-align: left;
        }
    } 
}

.journal-form-checkbox-section {
    background-color: #EFEFEF;
    padding: 8px 0 5px 12px;
    border-top: 1px solid #30576d;
    border-bottom: 1px solid #30576d;
}

.journal-documents-section {
    padding: 12px;
    border-bottom: 1px solid #30576d;
}

.journal-warnings-section {
    padding: 12px;
    border-bottom: 1px solid #30576d;
}

.journal-reminder-form-section {
    background-color: #EFEFEF;
    padding: 12px;
}

.journal-waiting-list-section {
    background-color: #EFEFEF;
    padding: 12px;
    border-bottom: 1px solid #30576d;
}

.journal-label-style {
    line-height: 1;
    font-size: 14px;
}

.journal-checkbox-styles {
    list-style-type: none; 
    font-size: 15px;
}

.journal-reminder-input-style {
    display: inline-block;
    margin: 0 10px;
    font-size: 14px;
    line-height: 1.42857143;
    height: 31px;
    color: #555;
    background-color: #fff; 
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 50px;
}
.journal-control-correction {
    height: 31px;
}

.journal-checkbox-vertical-aligment {
    vertical-align: bottom;
}

.journal-span-style {
    font-size: 14px;
}

.journal-text-connection-style {
    font-size: 18px;
    position: relative;
    top: 15px;
}
.position-ssn-on-journal {
    display: inline-block;
    margin-left: 30px;
}
.left-padding {
    padding-left: 12px;
}

/* pre-exam classes */
.pre-exam-border {
    border: 1px solid #30576d;
}

.pre-exam-border-top {
    border-top: 1px solid #30576d;
    padding-top: 15px;
}

.pre-exam-border-top-2 {
    border-top: 2px solid #30576d;
    padding-top: 15px;
}

.pre-exam-column-header-style {
    border-top: 2px solid #30576d;
    border-radius: 4px;
    padding: 12px 15px 8px 15px;
}

.pre-exam-tabel-header-style {
    float: left;
    width: 50%;
}

/*pre-exam memira classes*/
.minus-left-margin {
    margin-left: -15px !important;
}

.smaller-font-size {
    font-size: 12px !important;
}

.pre-exam-memira-topography-style {
    border-bottom: 1px solid #30576d;
    border-top: 1px solid #30576d;
}

input.eyedrops-note {
    width: 100%;
    border-style: hidden;

    &:focus {
        outline: none;
    }
}

/*pre-exam topography popover*/
.topography-popover.popover {
    left: calc(55% + 35px) !important;
    background-color: white !important;
    width: 100%;
    max-width: calc(45% - 80px);
}

.table-col-width {
    width: 75px;
}

/* refraction section */
.refraction-label-style {
    line-height: 1.5;
    font-size: 14px;
    text-align: center;
}

.refraction-label-position {
    position: relative;
    top: 25px;
}

input.input-fields-style {
    font-size: 12px;
    padding: 0 2px;
    text-align: center;
}

/* contact-lenses section */
.refraction-row-name-position {
    font-size: 18px;
    position: relative;
    top: 3px;
}

.keratometry-row-name-position {
    font-size: 18px;
    position: relative;
    top: 20px;
}

.contact-lenses-first-section-style {
    padding-bottom: 15px;
    border-bottom: 1px solid #30576d;
}

/* general style */
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

.custom-form-control {
  display: block;
  width: 100%;
  height: 24px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.custom-form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

::placeholder { 
  color: black;
  opacity: 1;
}

.plain-placeholder::placeholder {
    font-weight: 400;
    color: black;
}

.section-contet-padding {
    padding: 0 15px;
}

.section-content-container {
    padding: 15px;
    background-color:white;
}

.section-header-container {
    border-top: 3px solid #30576d;
    border-radius: 4px;
    background-color: white;
}

.section-header {
    padding: 0 15px;
}

textarea.section-box-style {
    width: 100%; 
    border: 1px solid #30576d;
}

.section-border-bottom {
    border-bottom: 2px solid #30576d; 
}

.section-line-height {
    line-height: 2;
    font-size: 12px;
}

.section-label-style {
    line-height: 1.5;
    font-size: 14px;
    text-align: left;
}

.section-bottom-shadow {
    box-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.34);
}
.section-top-shadow {
    box-shadow: 0 -1.5px 0 rgba(0, 0, 0, 0.34);
}

.dinamiclyMoveRow {
    margin-bottom: 28px;
}

.popover-marker .popover-content {    
    width: 100%;
    height: 200px;
    box-shadow: 2px 2px 20px rgba(0,0,0, .5);
    padding-top: 0;
    padding-left: 25px;
    padding-right: 25px;
}

.popover-marker.popover {
    left: calc(25% + 35px) !important;
    background-color: white !important;
    width: 100%;
    max-width: calc(75% - 80px);
}

.recommended-validation-warning {
    border: 1px solid orange !important;
    box-shadow: 0px 0px 5px 1px orange;
    padding-bottom:3px;
}

.textareaStyle {
    line-height: 15px;
}

/* history-notes-popup */ 

.historyNotesModal {
    height: 450px;
    overflow-y: auto;
}

/* Dynamic journal styles */
.static-placeholder {
    position: absolute;
    top: 3px;
}

.system-background-color {
    background: @mainColor;
    color: white;
}

/* Journal refraction popover */

.journal-refraction-popover {
    overflow-y: auto; 
    overflow-x: hidden !important; 
    height: 165px;
}

.journal-refraction-popover-paragraf {
    padding-left: 15px; 
    font-size: 12px; 
    position: relative; 
    top: 5px;
}

/* login.less */
.login-main{
    height:270px;
    width:300px;
    left:50%;
    margin-left:-150px;
    top:50%;
    margin-top:-125px;
    position:fixed;
}

.login-main-window{
    width: 300px;
}

.svg {
  fill: @mainColor;
}

.register-person-checkbox{
    width:20px!important;
    margin-top:10px!important;
}

.register-form-main-window{
    width:100%;
    background-color:white;
}

.register-person-left-right-window{
    width:305px;
}

.register-person-left-window{
    .register-person-left-right-window;
    float:left;
    margin-left: 10px;
}

.edit-person {
    width:35%;
    float:left;
    margin-left: 2.5%;
}

.competenceStyle {
    width:20%;
    float:left;
    margin-left: 2.5%;
}

.competenceHeight {
    height: 230px;    
    overflow-y: auto;
}

.register-person-right-window{
    .register-person-left-right-window;
    float:right;
    margin-right:15px;
}

.register-form-buttons{
    margin-bottom: 20px;
}

.register-form-button-container{
    margin: 0 25px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.register-form-date{
    width: 100%;
    margin-bottom: 15px;
}

.supplier-input-width {
    width: 100%;
}

.supplier-position-right-column {
    position: relative; 
    height: 299px;
}

.supplier-position-button {
    position: relative;
    margin-top: -7px;
}

.supplier-set-height {
    height: 83px;
}

div#supplierTableGrid .ui-grid .ui-grid-header-cell {
    height: 27px;
}

.sendSms-select-position {
    width: 100%;
    position: relative;
    top: 15px;
}

.supplier-bottom-position-element {
    position: absolute;
    bottom: 0;
    width: calc(100% - 7.5px);
}

.supplier-px {
    padding-left: 8px;
    padding-right: 8px;
}

.textareaHeight {
    height: 150px;
}

.new-user-label-style {
    line-height: 1.2; 
    font-size: 16px;
}

.new-user-span-style {
    font-size: 16px;
    margin-bottom: 7px;
    display: inline-block;
}

.positionModal .modal-dialog {
    width: 50%;
    top: 10%;
}

.positionCancelationModal .modal-dialog {
    width: 60%;
    top: 10%;
}

.positionJournalTemplatesModal .modal-dialog {
    width: 60%;
    top: 5%;
}

div.positionCreateReadHealthPersonnelModal {
    z-index: 30000 !important;
}

div.positionCreateReadHealthPersonnelModal .modal-dialog {
    width: 50%;
    top: 10%;    
}

div.positionJournalTemplatesModal {
    z-index: 30000 !important;
}

div.positionJournalNoteTemplatesModal {
    z-index: 30000 !important;

    .modal-dialog {
        top: 5%;
    }
}

div.existing-hc-modal {
    z-index: 30000 !important;

    .modal-dialog {
        top: 15%;
    }
}

div.person-certificate-modal,
div.person-certificate-modal .modal-dialog {
    z-index: 40000 !important;
    pointer-events: auto !important;
}

div.modalOnTop {
    z-index: 40000 !important;
}

.already-opened-modal .modal-dialog {
    max-width: 500px;
    top: 8%;

    .custom-padding {
        padding: 16px 48px 16px 40px;
    }
    .primary-button {
        color: #3593d2;
    }
    .middle-select {
        margin: 5px 110px 0px;
        width: 160px;
    }
}

.manifest-modal .modal-dialog {
    max-width: 500px;
    top: 7%;

    .modal-body {
        line-height: 1;
    }
    .custom-padding {
        padding: 16px 48px 0px 40px;
    }
    .modal-footer {
        padding: 10px 15px;
        margin-top: 16px;
        
        .primary-button {
            color: #3593d2;
        }
    }
}

.journals-overview-modal .modal-dialog {
    width: 70%;
}

.barcodes-modal .modal-dialog {
    width: 90%;
}

.select-optician-modal .modal-dialog {
    .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}

.register-form-date-input{
    border-radius: 0 !important;
    height: 26px !important;
    padding-left: 5px !important;
    margin-left: 5px !important;
    z-index:0 !important;
    width:300px !important;
}

.ui-grid-selectable {     
     user-select: text;
     cursor:auto;
 }

.nopadding {
    padding: 0;
}

.header-small{

    .box-header;

    text-align:center;
    font-size:x-large;
    border-bottom: none;
}

.header-small-white{
    .header-small;
    
    border-bottom: 1px solid #30576d;
    background-color:white; 
}

.box-small{

    .box-body;

    margin:10px;
    padding:10px;
}

.box-small-registerperson{
    width: 50%;
    margin: auto;
}

.box-small-health-contacts {
    width: 80%;
    margin: auto;
}

.box-small-create-new-chain{
    width:1100px;
    left:50%;
    position: relative;
    margin-left: -550px;
}

.login-input{
    margin:5px;
    width:225px;
}

.register-person-input{
    margin:5px;
    width:300px;
}

.register-form{
    input, select{
        margin:5px;
        width:300px;
    }
}

.input-validation-error{
    border: 1px solid red !important;
    box-shadow: 0px 0px 5px 1px rgba(247,8,8,0.75);
    padding-bottom:3px;
}

.input-validation-warning{
    border: 1px solid orange !important;
    box-shadow: 0px 0px 5px 1px orange;
    padding-bottom:3px;
}

.black-border-color{
    border-color: rgb(85, 85, 85);
}

.show-icon-on-hover{
    i{
        display: none;
    }
    
    &:hover{
        i{
            position: absolute;
            cursor: pointer;
            display: inline;
            font-size:large;
            margin-left:-10px;
        }     
    }
}

.show-hide-by-toggle-class{
    .toggle{
        display: none;
    }

    &:hover{
        .toggle{
            display:block;
        }
    }
}

.login-loader{
    position:absolute;
    left:130px;
    top:90px;
}

.verticaly-centered{
    vertical-align:middle;
}

.remember-me{
    .verticaly-centered;
    margin:5px;
}

.shops-main{
    
    width:600px;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:200px;
}

.pop-up-multiselect-main{
    .searchRoot;
    width:600px;
    left:50%;
    top:50%;
    margin-left:-300px;
}

.pop-up-multiselect-list{
    max-height:400px;
    overflow-y:auto;

    p{
        display:inline-block;
        width:100%;
    }
}

.shops-header{
    font-size:x-large;
    padding-bottom:10px;
}

.shops-list{
    max-height:400px;
    overflow-y:auto;
    overflow-x:hidden;
   .item{

       p{
               margin: 0 0 0px!important;
       }
       
       .shadowed;
       background-color:white;
       margin:5px;
       color:@mainColor;
       user-select:none;
       padding:12px;

       &:hover{
       background-color:@mainColor;
       margin:5px;
       color:white;
       cursor:pointer;
       }
   }
  
}



.customer-list{
    p{
        display:inline-block;
    }

    p:nth-child(1) { /* full name */
        width:23%;
        }
    p:nth-child(2) { /* date (fixed) */
        width:10%;
        }
    p:nth-child(3) { /* email */
        width:25%;
        }
    p:nth-child(4) { /* phone number (fixed) */
        width:15%;
        }
    p:nth-child(5) { /* full address */
        width:23%;
        }
}

.customer-item{
    max-height:400px;
    overflow-y:auto;
    padding-top:10px;

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

.authorization-main{

    .searchRoot;

    width:100%;
    position: relative;
    height: 550px;
    z-index: 0;

    p{
        width:100%;
        display:inline-block;   
    }
}

.authorization-list{
    max-height:400px;
    border-top:1px solid silver;
    
    p{
        width:250px;
        display:inline-block;   
    }
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

.personModal.modal-dialog {
    overflow-y: initial !important
}
.personModal.modal-body {
    height: 670px;
    overflow-y: auto;
}

.supplierModal {
    height: 623px;
    overflow-y: auto;
}

input.ng-pristine + ul#strength {
    display:none;
}
ul#strength {
    display:inline;
    list-style:none;
    margin:0;
    margin-left:15px;
    padding:0;
    vertical-align:2px;
}
.point:last {
    margin:0 !important;
}
.point {
    background:#DDD;
    border-radius:2px;
    display:inline-block;
    height:5px;
    margin-right:1px;
    width:20px;
}
#footer {
    position:fixed;
    bottom:5px;
}

/* micoTable.less */
.only-hover .fa-pencil-hover{
    display:none;
}

.fa-pencil-selected{
    display:none;
}

.only-hover:hover .fa-pencil-hover{
    display:inline-block;
}

.micoSelected{
    background-color:@mainColor!important;
    color:white;
    i{
        color:white!important;
    }
    input{
        color:#232323!important;
    }
    td{
        .fa-pencil-selected{
            display:inline-block!important;
        }
    }
}

.micoCarret{
    position:absolute!important;
    margin-left:10px!important;
}

.micoRowDisabled{
    td{
        color:silver!important;
    }
}

.hideElement{
    display:none!important;
}

/* material-switch.less */
.material-switch{
    margin: 10px;
    margin-top: -22px;
}
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
    user-select:none;
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

/* material-collapsible.less */
.collapsible {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    margin: 0.5rem 0 1rem 0;
    list-style-type: none;  
  }
  
  .collapsible-header {
    display: block;
    cursor: pointer;
    min-height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    overflow:hidden;
    user-select: none;
  }
  .collapsible-body {
    display: none;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
  }
  
  .collapsible.popout {
    border: none;
    box-shadow: none;
  }
  
  .collapsible.popout > li {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin: 0 24px;
    transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .collapsible.popout > li.active {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    margin: 16px 0;
  }

/* tabControl.less */
ul.tabControl{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;

    li, a{
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    }

    li {
        float: left;
        padding: 0;
        a:hover {background-color: #ddd;}
        a:focus, .active {background-color: #ccc;}
    }
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* scrollTable.less */
.sidemenu-container {
    width: 100%;
    height: 91%;
    display: flex;
    flex-direction: column;
    user-select: none;
    padding-right: 20px;
    overflow-y: auto;
    margin-left: -30px;
    margin-top: 40px;

    content {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0px;
    }

    .item {
        padding: 5px;
        background-color: whitesmoke;
        color: #222d32;
        border-left: 5px solid green;
        margin: 2px;
        &:hover{
            cursor:pointer;
            border-left: 5px solid #1dad1d;
        }
        .username {
            font-size: 12pt;

            i {
                float: left;
                margin-right: 15px;
            }
        }

        .sms-text {
            .shadowTwo;
            margin: 5px;
            border: 1px solid silver;
            background: rgba(255, 216, 0, 0.156863);
            padding: 10px;
            margin-right: 20px;
            transition: all 0.3s ease-in-out;
        }

        .sms-controls {
            margin-right: 20px;

            button {
                float: right;
                margin-left: 10px;
                border:none!important;
                background:#dbd8d8!important;
            }
            p{
                float:left;
                margin-left: 10px;
                font-size: 9pt;
            }
        }

    }

    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #464a4b;
    }

    &::-webkit-scrollbar {
        width: 6px;
        background-color: #464a4b;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #8d8d8d;
        border-radius:0!important;
    }
}

/* scheduler.less */
/* SCHEDULER GRID VARIABLES */
@cellHeight: 35px;
@innerCellHeight: 34px;
@cellWidth: 150px;
@cellPadding: 5px;

@cellsWide: 5;
@cellsHigh: 20;

@asideWidth: 270px;

@contentWidth: 1590px;
@contentHeight: 77vh;

@shopClosed: rgba(100, 50, 50, 0.1);
@nonBookable: rgba(255, 143, 0, 0.1);

@busyTimeBcg: rgb(77,77,77);
@busyTimeFrg: white;

/* SCHEDULER GRID */
.coordCell {
    &:hover {
        background-color: rgba(234, 234, 129, 0.31);
        cursor: pointer;
    }
}

.x-datepicker {
    width: 270px !important;
    display: inline-block;
    position: absolute;
    height: 37px !important;
    border: 1px solid #d2d2d2;
    font-weight: bold;
    box-shadow: none;
    margin-left: 0 !important;

    &:hover {
        cursor: pointer;
    }
}

.groupingRow {
    background-color: rgba(0, 152, 255, 0.11);
}

.work-hours {
    height: @cellHeight;
    text-align: center;
    vertical-align: top !important;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+34,eeeeee+76,ededed+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 34%, #f3f3f3 76%, #f1e9e9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 34%,#f3f3f3 76%,#f1e9e9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 34%, #f3f3f3 76%, #f1e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1e9e9',GradientType=0 ); /* IE6-9 */
    p {
        padding-top: 8px;
    }
}



.coordsTable {

    .table {
        background-color: white;
        width: auto;

        .h1 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .h2 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .h3 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .h4 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .h5 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        .h6 {
            margin-bottom: 0 !important;
            margin-top: 0 !important;
        }

        tr {
            td, th {
                min-width: @cellWidth;
                width: @cellWidth;
                min-height: @cellHeight;
                padding: 0;

                div {
                    padding: 0;
                    float: left;
                }

                p {
                    margin-bottom: 0 !important;
                }

                vertical-align: middle !important;
            }
        }
    }

  
    .coordsTable-sidebar {
        .one-column {
            width: 270px;
        }
        .table #rowRepeating tr td {
            min-width: 270px;
            width: 270px;
        }
    }

    &-sidebar {
        width: @asideWidth;
        height: @contentHeight;
        float: left;
        overflow: hidden;
        border-right: 1px solid #CCC;

        .table {
            width: 100% !important;
        }
    }

    &-header {
        width: @contentWidth;
        height: @cellHeight + (@cellPadding * 2);
        margin-left: @asideWidth;
        overflow: hidden;
        border-bottom: 1px solid #CCC;
    }

    &-body {
        -webkit-box-shadow: inset 4px 0px 16px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 4px 0px 16px -6px rgba(0,0,0,0.75);
        box-shadow: inset 4px 0px 16px -6px rgba(0,0,0,0.75);
        overflow: auto;
        width: @contentWidth;
        height: @contentHeight;
        position: absolute;
        left: 285px;
    }
}
/* APPOINTMENT */
.appointmentItem {
    border-left: 2px solid rgba(255,255,255,0.4);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition-property: top, left;
    transition-duration: 0.5s, 0.5s;
    .zaTooltip {
        width: 100%;
        height: 100%;
        border-left: 2px solid rgba(255,255,255,0.4);
    }
}

.x-steps {
    border-right: 1px dotted #eaeaea;

    &:last-child {
        border-right: none;
    }
}

.x-header-steps {
    height: 6px;
    border-right: 1px dotted silver;

    &:last-child {
        border-right: none;
    }
}

.dragbar-right {
    background-color: transparent;
    border-right: 2px double rgba(255,255,255,0.5);
    margin-right: 2px;
    height: 70%;
    width: 12px;
    cursor: col-resize;
    position: absolute;
    top: 15%;
    right: 0;

    &:hover {
        background-color: rgba(255,255,255,0.5);
    }
}

.dragbar-left {
    background-color: transparent;
    border-left: 2px solid rgba(255,255,255,0.5);
    border-right: 2px solid rgba(255,255,255,0.5);
    margin-left: 2px;
    height: 70%;
    width: 6px;
    cursor: col-resize;
    position: absolute;
    top: 15%;
    left: 0;

    &:hover {
        background-color: rgba(255,255,255,0.5);
    }
}

/* CONTEXT MENU */
.xmenu-content {
    display: none;
    position: absolute;
    z-index: 10;
    padding: 12px 0;
    width: 300px;
    background-color: #fff;
    border: solid 1px #dfdfdf;
    box-shadow: 1px 1px 2px #cfcfcf;

    &--active {
        display: block;
    }

    .tasks {
        list-style: none;
        margin: 0;
        padding: 0;

        a {
            display: block;
            padding: 4px 12px;
            color: #0066aa;
            text-decoration: none;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width:100%;
        }

        button {
            display: block;
            padding: 4px 12px;
            color: #0066aa;
            background-color: inherit;
            border: none;
            text-align: left;            
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width:100%;
        }
    }

    .task {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: solid 1px #dfdfdf;
        &:hover{
            background-color:@mainColor;
            a{
                color:white;
            }
            button{
                color:white;
            }
            button:disabled {
              color: rgb(150, 150, 150);
              cursor: not-allowed;
            }            
        }
    }

    .task:last-child {
        border-bottom: none;
    }
}

.shop-closed {
    background-color: @shopClosed;
    border-right: none;

    &:hover {
        background-color: @shopClosed;
    }
}

.not-bookable {
    background-color: @nonBookable;
    border-right: none;

    &:hover {
        background-color: @nonBookable;
    }
}

.optician-not-working {
    background-image: linear-gradient(45deg,rgba(200,200,200,.15) 25%,transparent 25%,transparent 50%,rgba(200,200,200,.15) 50%,rgba(200,200,200,.25) 75%,transparent 75%,transparent);
    background-size: 20px 20px;
}

#appointmentContextMenu {
    padding-top: 0 !important;
}

.allDayText {

    p {
        width: 900px;
        margin-left: 300px;
        font-weight: bold;
        text-align: center;
        font-style: italic;
        user-select: none !important;

        &:hover {
            cursor: pointer;
        }
    }

    input {
        background: rgba(255,255,255,0.9);
        border: none;
        width: 900px;
        margin-left: 300px;
    }
}

.busyTimeMockup {
    width: 100%;
    height: 28px;
    text-align: center;
    padding-top: 3px;
}

.busyTime {
    background: @busyTimeBcg;
    color: @busyTimeFrg;
}

.busyTimeText{
    position: absolute;
    width: 300px;
    height: 111px;
    background: #efecec;
    border:1px solid rgba(77,77,77, 0.1);
    border-radius: 5px;
    top: 30px;
    bottom: 20px;
    left: -20px;
    padding: 5px;
    z-index: 10000000;
}

.busyTimeText:after, .busyTimeText:before {
	bottom: 100%;
	left: 40px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.busyTimeText:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #efecec;
	border-width: 12px;
	margin-left: -12px;
}

.bspencil{
    background-color: darkorange;
    color: white;
    display: none!important;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    line-height: 2;
    padding-left: 10px;
    top: -2px;
    left: 5px;
    z-index: 1000000;
    opacity: 1;

       &:hover{
           display:block!important;
           cursor:pointer;
       }
   }


.busytime{
   
   &:hover{
       .bspencil{
           display:block!important;
           cursor:pointer;
       }
   }
}
.appointment-icon {
    position: absolute;
    top: 1px;
    right: 5px;
    font-size: 15px; 
}
.bookingCalendar table thead tr:first-of-type th button {
    border: 0;
    font-size: 14px;
}
.bookingCalendar table thead tr:first-of-type th button .btn.btn-default:hover {
    background-color: transparent !important;
}
.bookingCalendar table thead tr:nth-of-type(2) th small {
    font-size: 14px;
}
.bookingCalendar table tbody tr td button {
    border: 0;
    font-size: 14px;
    padding: 11px;
}
.coordsTable-header {
    overflow: inherit;
    width: 100%;
    position: relative;
}
.sliderTextStyle {
    font-size: 18px;
    font-weight: bold;
    padding: 0 14px;
}
.minusMarginTop {
    margin-top: -7px;
}
.removeGap {
    overflow-x: hidden;
    padding-left: 0;
    margin-left: 0;
    position: absolute;
    left: 270px;
}
.table {
    margin-bottom: 0px !important;  
}
.bookingCalendar {
    background-color: white;
    border: 1px solid #d1d1d1;
}
.bookingCalendar .btn-info.active, .btn-info:active {
    color: #fff;
    background-color: #428BCA;
    border-color: #428BCA;
    border-radius: 5px;
}
.bookingCalendar .btn-info.active, .btn-info:active .text-info {
    color: white;
}
.coordsTable-header .input-group {
    width: 270px!important;
}
.appointmentItem span {
    display: block;
    height: 100%;
}
.popover.bottom > .arrow:after {
    border-bottom-color: black !important;
}

/* timesetter.less */
@white-color: #ffffff;
@border-color: #bebebe;

.time-picker-width-with-arrows{
    width:80px;
}

.time-picker-width-without-arrows{
    width:50px;
}

.read-only-background-color{
    background-color: whitesmoke!important;
    user-select: none;
}

.divTimeSetterContainer
{
    .timeValueBorder {
        float: left;
        background-color: @white-color;
        border: 1px solid @border-color;
        border-radius: 3px;
        height: 30px;
        padding: 0 0 0 5px;
    }

    input.timePart
    {
        float: left;
        margin-top: 1px;
        text-align: center;
        height: 25px;
        border: none;
        font-size: 1.05em;
        font-weight: bold;
        border-radius: 3px;
        padding: 0;
        cursor: text;
        outline: none;
    }

    input.hours
    {
        width: 20px;
    }

    input.minutes
    {
        width: 20px;
    }

    span.hourSymbol, span.minuteSymbol
    {
        float: left;
        margin: 6px 2px 0 2px;
        font-size: 0.9em;
    }

    span.timeDelimiter
    {
        float: left;
        font-size: 0.9em;
        margin: 5px 0px 0 2px;
    }

    .postfix-position
    {
        position: relative;
        right: -3px;
        top: 5px;
        font-weight: bold;
    }

    .button-time-control
    {
        width: 20px;
        float: left;
        position: relative;
        right: -1px;
        top: -1px;
        cursor: pointer;

        div.updownButton
        {
            width: 20px;
            float: left;
            height: 15px;
            border: 1px solid @border-color;
            text-align: center;

            &:first-child
            {
                border-top-right-radius: 3px;
                border-bottom: none; /* to remove double line */
            }

            &:last-child
            {
                border-bottom-right-radius: 3px;
            }

            i
            {
                font-weight: bold;
                font-size: 0.7em;
                top: -2px;
            }
        }

        div.updownButton:hover
        {
            background-color: @border-color;
        }
    }
}

/* Overrides.less */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

.col-xs-40 {
    position: relative;
    width: 40%;
    float: left;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.breadcrumb{
    padding: 0 15px;
    padding-top: 4px;
    margin-bottom: 3px;
    list-style: none;   
    font-size: 19pt;
    background-color:transparent;
    border-radius: 4px;
    a{
       color:#ffffff;
    }
    > .active{
           color:rgba(255,255,255,0.7)!important
    }
}

.tooltip{
    width:200px!important;    
}

.badge{
    position: absolute;
    top: -4px;
    left: -11px;
    font-size: 12pt;
    background: red;
}

.badge-success {
    background: @colorGreen;
}

.badge-second-opinion {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
    background: red;
    margin-top: -5px;
}

.checkbox{
    label{
        font-size:11pt!important;
    }
    input{
        margin-top:11px!important;
    }
}

.checkbox+.checkbox {
    margin-top: 10px;
}

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(100,100, 100, 0), rgba(100,100, 100, 0.75), rgba(100,100, 100, 0));
}

.popover-title{
    background-color: @mainColor;
    color: #d8d8d8;
    border-bottom:none;
    margin-bottom:2px;
}
.popover-content{
        background:  white;
        color:black;
}

.popover{
        background:  #272727;
        border: none;
        width: 270px;
               
        .item{
            padding:5px;
            padding-top: 12px;
            &:hover{
                background-color:rgba(255,255,255,0.2);
            }
        }
}

.popover.top>.arrow:after {
   
    border-top-color:  #272727;
   
}

.popover.left>.arrow:after {
   
    border-left-color:  #272727;
   
}

input[type="text"]:disabled,
textarea:disabled {
    background: #f6f6f6;
}

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

.zindex {
    z-index: 99000 !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar
{
	width: 12px;
    height: 12px;
	background-color: #F5F5F5;  
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: @mainColor;
}

.ajs-modal{
    z-index:999999!important;
}
.ajs-button {
    text-transform: lowercase !important;
}
.ajs-button::first-letter {
    text-transform: capitalize;
}
.ajs-cancel {
    float: left;
}
.qsGroupControl{
    width: 100%;
    height: 34px;
    border-radius: 3px;
    border: 1px solid silver;
}

table.dataTable thead th{
    border-bottom:1px solid silver!important;
}

.staff-planning{

    mico-tablee{

        th, td{
            padding-left: 10px!important;
            padding-right: 0!important;
        }

        th{
            text-align: center!important;
        }

        td:first-child,
        th:first-child{
            width:120px;
            text-align: left!important;
        }

        float:left;

        td:nth-child(2),
        th:nth-child(2),
        td:nth-child(5),
        th:nth-child(5),
        td:nth-child(8),
        th:nth-child(8),
        td:nth-child(11),
        th:nth-child(11),
        td:nth-child(14),
        th:nth-child(14),
        td:nth-child(17),
        th:nth-child(17),
        td:nth-child(20),
        th:nth-child(20),
        td:nth-child(23),
        th:nth-child(23){
            border-left: 1px solid silver;
        }
    }

    .time-interval{
        width: 100px;
    }

    .timeValueBorder{
        padding: 0!important;
    }

    .headerTable{

        tr:first-child{
            td{
                font-weight:bold;
                font-size:16px;
                height:40px;
                vertical-align:top;
            }
        }

        tr:last-child{
            td{
                height:40px;
                vertical-align:top;
            }
        }

        td{
            border-left: 1px solid silver;
            text-align:center!important;

            span{
                width:100%;
            }
        }

        td:last-child{
            border-right: 1px solid silver;
        }
    }

    .footerTable{

        textarea{
            width:95%;
            height:77%;
            margin-top:50px;
        }
        td{
            border-left: 1px solid silver;
        }

        td:last-child{
            border-right: 1px solid silver;
        }

        tr:nth-child(1){
            td:first-child{
                border: none;
            }
            td{
                height: 200px;
            }
        }
    }

    .footerTableSum{
        .footerTable;

        td{
            height: 0!important;
            padding-left: 60px!important;
        }

        td:last-child{
            width: 0;
            border-right:none;
            padding-left: 10px!important;
        }

        td:first-child{
            padding-left: 10px!important;
        }
    }

    .headerTable,
    .footerTable{

        td:first-child{
            width:130px;
            border-left: none;
            text-align:left!important;
        }

        float:left;

        tr{
            td{
                padding-left:10px;
                width:231px;
            }
        }
    }
}

.time-interval{
    width: 150px;
    padding: 0;

    div {
        padding: 0;
    }
}

.sort-list {
list-style: none outside none;
margin: 10px 0 30px;
}

.sort-item {
    width: 400px;
    padding: 10px 10px;
    margin: 5px 0;
    border: 1px solid silver;
    border-left: 5px solid #30576d;
    background: white;
    font-size: 1.1em;
    cursor: -webkit-grab;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

/* Other */
@media print {
    .row {
        margin-bottom: 10px !important;
   }
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
   }
    html, html * {
        margin: 0;
        padding: 0;
   }
    body * {
        visibility: hidden;
   }
    .section-to-print, .section-to-print * {
        visibility: visible !important;
   }
    .section-to-print {
        position: absolute !important;
        padding: 10px !important;
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        page-break-before: avoid !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 10pt !important;
        p {
            margin: 0 0 0px;
            font-size: 10pt;
       }
        table {
            border-collapse: collapse;
            border-spacing: 0;
       }
        thead {
            display: table-header-group;
            page-break-after: avoid;
            page-break-inside: avoid;
       }
        tr {
            page-break-inside: avoid;
            page-break-after: auto;
       }
   }
    .HideOnPrint, .HideOnPrint * {
        display: none;
        content: none;
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 0;
        visibility: hidden;
        overflow: hidden;
   }
    body {
   }
}
@page {
    margin: 0mm 0mm 0mm 0mm;
    padding: 0 !important;
    size: landscape;
}
.alertify-notifier{
    z-index: 99999;
}
.more, .less {
    a {
        color: #0254EB;
   }
    a:visited {
        color: #0254EB;
   }
    a.morelink {
        text-decoration: none;
        outline: none;
   }
}
.morecontent span {
    display: none;
}
.section-to-print {
    font-size: smaller;
}
#style-4::-webkit-scrollbar-track {
    background-color: #222d32;
}
#style-4::-webkit-scrollbar {
    width: 7px;
    background-color: #222d32;
}
#style-4::-webkit-scrollbar-thumb {
    background-color: #505d63;
    border: 2px solid #505d63;
}
.checkbox label {
    padding-left: 5px;
    width: 0%;
    line-height: 0;
}
.checkbox label:after, .radio label:after {
    content: '';
    display: table;
    clear: both;
}
.checkbox .cr, .radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #000000;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}
.main-front-color {
    color: @mainColor;
}
.radio .cr {
    border-radius: 50%;
}
.checkbox .cr .cr-icon, .radio .cr .cr-icon {
    position: absolute;
    font-size: 14px;
    line-height: 0;
    top: 8px;
    left: 1px;
}
.radio .cr .cr-icon {
    margin-left: 0.04em;
}
.checkbox label input[type="checkbox"], .radio label input[type="radio"] {
    display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon, .radio label input[type="radio"]+.cr>.cr-icon {
    transform: scale(2) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon, .radio label input[type="radio"]:checked+.cr>.cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr, .radio label input[type="radio"]:disabled+.cr {
    opacity: .5;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.paddingLeft {
    padding-left: 4.5%;
}
.d-inline {
    display: inline!important;
}
.p-0 {
    padding: 0;
}
.p-5 {
    padding: 5px !important;
}
.p-10 {
    padding: 10px;
}
.p-15 {
    padding: 15px;
}
.px-0 {
    padding-right: 0px;
    padding-left: 0px;
}
.px-5 {
    padding-right: 5px;
    padding-left: 5px;
}
.px-10 {
    padding-right: 10px;
    padding-left: 10px;
}
.px-35 {
    padding-right: 35px;
    padding-left: 35px;
}
.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: 1px;
}
.pt-3 {
    padding-top: 3px;
}
.pt-5 {
    padding-top: 5px;
}
.pt-6 {
    padding-top: 6px;
}
.pt-8 {
    padding-top: 8px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-25 {
    padding-top: 25px;
}
.pt-250 {
    padding-top: 250px;
}
.pr-0 {
    padding-right: 0;
}
.pr-3 {
    padding-right: 3px;
}
.pr-5 {
    padding-right: 5px;
}
.pr-10 {
    padding-right: 10px;
}
.pr-15 {
    padding-right: 15px;
}
.pr-21 {
    padding-right: 21px;
}
.pr-25 {
    padding-right: 25px;
}
.pr-27 {
    padding-right: 27px;
}
.pr-28 {
    padding-right: 28px;
}
.pr-30 {
    padding-right: 30px;
}
.pr-40 {
    padding-right: 40px;
}
.pl-0 {
    padding-left: 0 !important;
}
.pl-2 {
    padding-left: 2px;
}
.pl-3 {
    padding-left: 3px;
}
.pl-5 {
    padding-left: 5px;
}
.pl-10 {
    padding-left: 10px;
}
.pl-12 {
    padding-left: 12px;
}
.pl-15 {
    padding-left: 15px;
}
.pl-17 {
    padding-left: 17px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-25 {
    padding-left: 25px;
}
.pl-27 {
    padding-left: 27px;
}
.pl-30 {
    padding-left: 30px;
}
.pl-36 {
    padding-left: 36px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-42 {
    padding-left: 42px;
}
.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: 1px;
}
.pb-5 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.mt-negative-5 {
    margin-top: -5px;
}
.mt-negative-10 {
    margin-top: -10px;
}
.mt-minus-28 {
    margin-top: -28px;
}
.mt-negativ-20 {
    margin-top: -20px !important; 
}
.mt-minus-125 {
    margin-top: -125px;
}
.mt-minus-5 {
    margin-top: -5px;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-2 {
    margin-top: 2px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-8 {
    margin-top: 8px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-17 {
    margin-top: 17px;
}
.mt-18 {
    margin-top: 18px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-25 {
    margin-top: 25px;
}
.mt-35 {
    margin-top: 35px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-104 {
    margin-top: 104px;
}
.mt-auto {
    margin-top: auto;
}
.mr-0 {
    margin-right: 0;
}
.mr-2 {
    margin-right: 2px;
}
.mr-5 {
    margin-right: 5px;
}
.mr-10 {
    margin-right: 10px
}
.mr-20 {
    margin-right: 20px;
}
.mr-40 {
    margin-right: 40px;
}
.mr-auto {
    margin-right: auto;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-2 {
    margin-bottom: 2px;
}
.mb-3 {
    margin-bottom: 3px;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-6 {
    margin-bottom: 6px;
}
.mb-7 {
    margin-bottom: 7px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-35 {
    margin-bottom: 35px;
}
.ml-0 {
    margin-left: 0 !important;
}
.ml-2 {
    margin-left: 2px;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px !important;
}
.ml-15 {
    margin-left: 15px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-25 {
    margin-left: 25px;
}
.ml-40 {
    margin-left: 40px;
}
.ml-100 {
    margin-left: 100px;
}
.ml-minus-15 {
    margin-left: -15px;
}
.ml-minus-150 {
    margin-left: -150px;
}
.mx-auto {
    margin: auto;
}
.top-1 {
    top: 1px;
}
.right-5 {
    right: 5px;
}
.right-20 {
    right: 20px;
}
.right-21 {
    right: 21px;
}
.border-top {
    border-top: 1px solid #ddd;
}
.border-right {
    border-right: 1px solid #ddd;
}
.border-bottom {
    border-bottom: 1px solid #ddd;
}
.fs-9 {
    font-size: 9px !important;
}
.fs-10 {
    font-size: 10px !important;
}
.fs-12 {
    font-size: 12px;
}
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-17 {
    font-size: 17px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-22 {
    font-size: 22px;
}
.fs-28 {
    font-size: 28px;
}
.fs-40 {
    font-size: 40px;
}
.fw-bold {
    font-weight: bold;
}
.fw-normal {
    font-weight: normal;
}
.text-dark {
    color: rgb(52, 58, 64);
}
.address-on-map-modal {
    .modal-dialog {
        width: 50%;
    }
}
.h-50vh {
    height: 50vh;
}
.maxw-30 {
    max-width: 30px;
}
.maxw-40 {
    max-width: 40px;
}
.maxw-70 {
    max-width: 70px;
}
.maxw-85 {
    max-width: 85px;
}
.maxw-300 {
    max-width: 300px;
}
.minw-60 {
    min-width: 60px;
}
.minw-155 {
    min-width: 155px;
}
.maxh-30 {
    max-height: 30px;
}
.maxh-50 {
    max-height: 50px;
}
.minh-83 {
    min-height: 83px;
}
.transparent-background {
    background-color: transparent;
}
.transparent-border {
    border: transparent;
}
.transparent-right-border {
    border-right-color: transparent !important;
}
.no-border-radius {
    border-radius: 0 !important;
}
.no-background-image {
    background-image: none !important;
}
.theme-background {
    background-color: @mainColor !important;
}
.theme-color {
    color: @mainColor !important;
}
.white-background {
    background-color: white !important;
}
.transparent-button, .transparent-button:hover, .transparent-button:focus, .transparent-button:active, .transparent-button:active:hover, .transparent-button:active:focus, .transparent-button[disabled], .transparent-button[disabled]:hover, .transparent-button[disabled]:focus, .transparent-button[disabled]:active {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: transparent;
    outline-color: transparent;
}
#configurationJournalTypes .transparent-button:hover {
    color: rgb(255, 255, 255);
}
.selection-box {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid rgb(238, 238, 238);
    border-left-width: 5px;
    cursor: pointer;
}
.selection-box-info {
    border-left-color: rgb(27, 128, 158);
}
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d-block {
    display: inline-block;
}
.focus-outline-none:focus {
    outline: none !important;
    border: 0 !important;
}
@media (min-width: 768px) {
    .pull-sm-right {
        float: right !important;
   }
    .dl-horizontal dt {
        width: 100px;
        text-align: left;
   }
    .dl-horizontal dd {
        margin-left: 100px;
   }
    .text-sm-left {
        text-align: left !important;
   }
    .text-sm-center {
        text-align: center;
   }
    .text-sm-right {
        text-align: right;
   }
    .ml-sm-65 {
        margin-left: 65px;
   }
    .mb-sm-10 {
        margin-bottom: 10px;
   }
    .pt-sm-145 {
        padding-top: 145px;
   }
    .pr-sm-10 {
        padding-right: 10px;
   }
    .pl-sm-10 {
        padding-left: 10px;
   }
    .pl-sm-25 {
        padding-left: 25px;
   }
    .minw-sm-250 {
        min-width: 250px;
   }
    .minw-sm-450 {
        min-width: 450px;
   }
    .minw-sm-500 {
        min-width: 500px;
   }
    .maxw-sm-42 {
        max-width: 42px;
   }
    .maxw-sm-47 {
        max-width: 47px;
   }
    .maxw-sm-52 {
        max-width: 52px;
   }
    .maxh-sm-100 {
        max-height: 100px;
   }
    .maxh-sm-144 {
        max-height: 144px;
   }
}
@media (min-width: 992px) {
    .pull-md-right {
        float: right !important;
   }
    .text-md-left {
        text-align: left !important;
   }
    .text-md-center {
        text-align: center;
   }
    .text-md-right {
        text-align: right;
   }
    .ml-md-65 {
        margin-left: 65px;
   }
    .mb-md-10 {
        margin-bottom: 10px;
   }
    .pt-md-140 {
        padding-top: 140px;
   }
    .pr-md-0 {
        padding-right: 0;
   }
    .pr-md-10 {
        padding-right: 10px;
   }
    .pl-md-0 {
        padding-left: 0;
   }
    .pl-md-10 {
        padding-left: 10px;
   }
    .pl-md-25 {
        padding-left: 25px;
   }
    .minw-md-250 {
        min-width: 250px;
   }
    .minw-md-450 {
        min-width: 450px;
   }
    .minw-md-500 {
        min-width: 500px;
   }
    .maxw-md-42 {
        max-width: 42px;
   }
    .maxw-md-47 {
        max-width: 47px;
   }
    .maxw-md-52 {
        max-width: 52px;
   }
    .maxh-md-100 {
        max-height: 100px;
   }
    .maxh-md-144 {
        max-height: 144px;
   }
}
@media (min-width: 1200px) {
    .pull-lg-right {
        float: right !important;
   }
    .text-lg-left {
        text-align: left !important;
   }
    .text-lg-center {
        text-align: center;
   }
    .text-lg-right {
        text-align: right;
   }
    .ml-lg-38 {
        margin-left: 38px;
   }
    .ml-lg-65 {
        margin-left: 65px;
   }
    .mb-lg-0 {
        margin-bottom: 0;
   }
    .pt-lg-15 {
        padding-top: 15px;
   }
    .pt-lg-20 {
        padding-top: 20px;
   }
    .pt-lg-25 {
        padding-top: 25px;
   }
    .pt-lg-140 {
        padding-top: 140px;
   }
    .pr-lg-0 {
        padding-right: 0;
   }
    .pr-lg-5 {
        padding-right: 5px;
   }
    .pr-lg-10 {
        padding-right: 10px;
   }
    .pl-lg-0 {
        padding-left: 0;
   }
    .pl-lg-5 {
        padding-left: 5px;
   }
    .pl-lg-10 {
        padding-left: 10px;
   }
    .pl-lg-25 {
        padding-left: 25px;
   }
    .minw-lg-250 {
        min-width: 250px;
   }
    .minw-lg-350 {
        min-width: 350px;
   }
    .minw-lg-450 {
        min-width: 450px;
   }
    .minw-lg-500 {
        min-width: 500px;
   }
    .maxw-lg-31 {
        max-width: 31px;
    }
    .maxw-lg-40 {
        max-width: 40px;
   }
    .maxw-lg-42 {
        max-width: 42px;
   }
    .maxw-lg-47 {
        max-width: 47px;
   }
    .maxw-lg-52 {
        max-width: 52px;
   }
    .maxh-lg-100 {
        max-height: 100px;
   }
    .maxh-lg-144 {
        max-height: 144px;
   }
    .fs-lg-10 {
        font-size: 10px !important;
   }
    .fs-lg-12 {
        font-size: 12px;
   }
}
.work-in-progress {
    color: rgb(244, 67, 54);
}
.invalid-input {
    background-color: rgb(244, 67, 54);
    color: rgb(255, 255, 255) !important;
}
.login-section {
    position: fixed;
    top: 50%;
    left: 50%;
}
#orderSection .form-control,
#contactLensesSection .panel,
#contactLensesSection .form-control,
#iclSection .panel,
#iclSection .form-control {
    border-radius: 0;
}
#contactLensesSection .panel-default>.panel-heading,
#iclSection .panel-default>.panel-heading {
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
    color: rgb(255, 255, 255);
    background-color: rgb(119, 119, 119);
    border-color: rgb(119, 119, 119);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#orderSection hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
#orderSection .refraction-form-header {
    color: rgb(255, 255, 255);
}
#orderSection .selected-lens, #orderSection .selected-lens:focus {
    outline-style: double;
    outline-color: rgb(117, 117, 117);
    outline-width: 4px;
}
#orderSection label,
#contactLensesSection label,
#iclSection label,
.journalReminderSection label,
.normalized-label {
    line-height: inherit;
    font-size: 14px;
}
#orderSection .unit-border-color {
    border-color: rgb(51, 51, 51);
}
#orderSection .status-details {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline-color: transparent;
}
.selected-value {
    background-color: rgb(174, 213, 129) !important;
}
#orderSection .selected-value option:not(:checked) {
    background-color: rgb(255, 255, 255);
}
#orderSection .tooltip-arrow {
    display: none;
}
#orderSection .tooltip-inner {
    color: rgb(0,0,0);
    background-color: rgb(255,255,255);
    border-radius: 0;
    border: 1px solid rgb(221,221,221);
}
.configuration-table {
    .ui-grid {
        border: none;
   }
    .ui-grid input, .ui-grid input:focus {
        color: rgb(85, 85, 85);
   }
    .ui-grid-top-panel {
        background-color: transparent;
   }
    .ui-grid-header-cell {
        border: none;
   }
    .ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
        border-right: none;
   }
    .ui-grid-cell {
        border-bottom: 1px solid;
        border-color: rgb(212, 212, 212);
   }
    .ui-grid-cell-contents {
        height: 41px;
   }
    .ui-grid-row:nth-child(odd) .ui-grid-cell {
        background-color: rgb(255, 255, 255);
   }
    .ui-grid-row:nth-child(even) .ui-grid-cell {
        background-color: rgb(255, 255, 255);
   }
    .ui-grid-row:hover .ui-grid-cell {
        background-color: rgb(246, 246, 246);
   }
    .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell {
        background-color: @mainColor;
        color: rgb(255, 255, 255);
   }
}
.product-import-grid .ui-grid-menu .ui-grid-menu-inner ul li:first-child {
    display: none;
}
.btn-arrow-right {
    position: relative;
    padding-left: 36px;
    padding-right: 18px;
}
.btn-arrow-right::before, .btn-arrow-right::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 22px;
    height: 22px;
    background: inherit;
    border: inherit;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 0px 4px 0px 0px;
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.btn-arrow-right::before {
    left: -11px;
    background-color: white;
}
.btn-arrow-right::after {
    right: -11px;
    z-index: 1;
}
.btn-arrow-right:active:focus, .btn-arrow-right:focus {
    outline: none;
}
.btn-arrow-right[disabled] {
    opacity: 1;
}
input[type=number] {
    -moz-appearance: textfield;
}
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.modal-xl {
    width: 75%;
}
.modal-content {
    border-radius: 0;
}
.modal-header, .modal-footer {
    background-color: rgb(250, 250, 250);
}
.modal-header {
    border-bottom: 1px solid rgb(238, 238, 238);
}
.modal-footer {
    border-top: 1px solid rgb(238, 238, 238);
}
.cursor-pointer {
    cursor: pointer;
}
.absolute {
    position: absolute;
}
.z-index-1 {
    z-index: 1;
}
client-search {
    .popover {
        min-width: 377px;
        border-radius: 0;
        background-color: rgba(0,0,0,.25);
        .popover-content {
            max-height: 30px;
            padding: 5px;
            font-size: 12px;
       }
   }
}
.appointmentItem .popover-content, .product-info .popover-content {
    background-color: black;
    color: white;
}
.md-tab {
    text-transform: none;
}
md-tab-item:first-child {
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-color: rgb(221, 221, 221);
}
md-tab-item:not(:first-child) {
    border-top: 1px solid;
    border-right: 1px solid;
    border-color: rgb(221, 221, 221);
}
md-tabs md-ink-bar {
    color: rgb(63,81,181);
    background: rgb(63,81,181);
}
md-tabs-content-wrapper {
    border: 1px solid rgb(221, 221, 221);
}
md-tab-content {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
}
md-dialog.md-default-theme, md-dialog {
    border-radius: 0;
}

.product-import-column-color {
    background-color: rgb(243, 243, 243);
}
.grid-menu-button-background {
    background-color: rgb(243,243,243);
}
#productImportTabs {
    .ui-grid-menu-button {
        background: transparent;
        border-left: none;
        border-bottom: none;
        .ui-grid-icon-container {
            visibility: hidden;
            height: 0;
            margin: 0;
       }
   }
}
.ui-grid-pager-row-count-picker select {
    padding: 0;
}
body>.ui-select-bootstrap.open {
    z-index: 99000;
}
.search-results-panel {
    width: 1000px;
    position: absolute;
    z-index: 9999;
}
.editPopover {
    max-height: 300px;
    overflow-x: hidden;
}
.customerPopoverIcon {
    font-size: 24px;
}
.selected-ink-bar {
    -webkit-box-shadow: inset 0px -2px 0px 0px rgba(51,122,183,1);
    -moz-box-shadow: inset 0px -2px 0px 0px rgba(51,122,183,1);
    box-shadow: inset 0px -2px 0px 0px rgba(51,122,183,1);
}
.input-text-security {
    -webkit-text-security: disc;
}

//Services section 
label.services-label-style {
    line-height: 1;
    font-size: 1.2em;
}
.servicesModel {
    height: 450px;
    overflow-y: auto;
}
input[type="radio"].services-checkbox-style {
    margin-left: 15px;
    margin-right: 15px;
}
.removeFocus:focus {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.material-color-red-500 {
    color: rgb(244,67,54);
}
.material-color-amber-500 {
    color: rgb(255,193,7);
}
//End Services section

//Client section
    .popover-external-client-number {
        background-color: white;
    }
    .popover-extended{
    max-width: 500px;
    width: -webkit-max-content;
}
//End Client section

//Clinical IOP History Popover
.popover-clinical-iop-history.popover {
    max-width: 500px;
    background-color: white !important;
    width: 100%;
    z-index: 20000;
}

.popover-clinical-iop-history .popover-content {
    width: 100%;
    height: 200px;
    padding-top: 0;
}

.popover-clinical-iop-history-scroll {
    overflow-y: auto; 
    overflow-x: hidden !important; 
    height: 145px;
}

.first-column-width {
    width: 125px;
}
.second-column-width {
    width: 52px;
}
//End Clinical IOP History Popover

//Memira Surgical Section

.label-style {
    line-height: 1
}

div label.surgical-label-style {
    text-align: left !important;
    line-height: 1.3;
    font-size: 16px;
    padding-top: 0 !important;
}

div label.surgical-checkbox-style {
    text-align: left !important;
    font-size: 16px;
    padding-top: 0 !important;
}

.second-section-background {    
    background-color: #01c09f;
}

.treatable-no-treatment-background {
    background-color: red;
    color: white;
}

.second-section-border {
    border: 1px solid black;
}

.second-section-rigth-border {
    border-right: 1px solid black;
}

.second-section-line-height {
    line-height: 1.8
}

.second-section-lable-style {
    font-size: 16px;
    position: relative;
    top: -7px;
    text-align: center;
}

.position-placeholder {
    position: absolute;
    top: 7px;
    right: 23px;
}

input.remove-focus-state:focus {
    border: 1px solid #ccc;
    box-shadow: none;
}

//End Memira Surgical Section

//Memira Conclusion Section

.select-style {
    display: block;
    width: 100%;        
    font-size: 14px;    
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.select-style[disabled] {
    background-color: #eee;
    opacity: 1;
    cursor: not-allowed;
}

.border-limiter {
    border-right: 2px solid black;
}

//End Memira Conclusion Section

//Follow Up Section

.span-style {
    display: inline-block;
    width: 100%;
    background-color: #01c09f;
}

//End Follow Up Section

//Configuration Vlaues

.system-level {
    color: dodgerblue;
    font-weight: bold;
}
.region-level {
    color: rgb(0, 128, 0);
    font-weight: bold; 
}
.chain-level {    
    color: rgb(255, 0, 0);
    font-weight: bold;
}
.shop-level {
    color: violet;
    font-weight: bold;
}

//End of configuration value

//Journal-Form Section
.journal-form-field-styles {
    background-color: white; 
    height: 30px; 
    padding-top: 4px;
}
.journal-form-input-field-styles {
    width: 100%; 
    background-color: #f1f4ff; 
    border: none;
}
.journal-form-container-styles {
    background-color: #d3e4ea; 
    height: 700px; 
    overflow: auto;
}
.journal-form-overflow-style {
    overflow: auto;
    height: 20px;
}
.journal-form-text-field-styles {
    background-color: white; 
    height: 46px; 
    padding-top: 4px;
}
.journal-form-text-area-field-styles {
    background-color: white; 
    height: 308px; 
    padding-top: 4px;
}
.journal-form-label-field-style {
    height: 40px;
    overflow: auto;
}
//End of Journal-Form Section

//Clinic info section
.clinic-info-delete-icon {
    position: absolute;
    font-size: 14px;
    right: 20px;
    top: -5px;
    cursor: pointer;
}
.clinic-info-logo-section .clinic-info-hide {
    visibility: hidden;
}
.clinic-info-logo-section:hover .clinic-info-hide {
    visibility: visible;
}
//End of clinic info section

.pt-0-with-priority {
    padding-top: 0 !important;
}

.text-color-white {
    color: white
}

.gray-color {
    color: gray
}
.cursor-pointer:hover {
    cursor: pointer;
}

.big-box {
    width: 80%;
    margin: auto;
}

.listItemShadow {
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.hideIcon {
    display: none;
}

.listItemShadow:hover .hideIcon {
    display: inline-block;
} 

.border-left-gray {
    border-left: 1px solid #dcdcdc;
}

.text-color-gray {
    color: #777777
}
.label-line-height {
    line-height: 1.5;
}
.copy-arrow {
    position: absolute;
    right: -17px;
    bottom: 6px;
}
.line-height-half {
    line-height: 0.5;
}
.background-red {
    background-color: red;
}
.prevent-text-area-resizing {
    resize: none;
}
.color-black {
    color: black;
}
.limit-height {
    max-height: 500px;
    overflow: auto;
}

.has-historical-data {
    text-decoration: underline;
    cursor: pointer;

    &:hover {
        color: #30576d;
    }
}

.read-only-section {
  pointer-events: none;
  opacity: 0.6;
}

// Prescription section
.prescription-items-container {
    height: 235px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #eee;
    border: 1px solid #ccc;
    opacity: 1;
    padding: 6px 12px;
}
// End of Prescription section

.category-display {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.category-hide {
    text-overflow: ellipsis;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden !important;
}

/* flex */
.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.align-items-center {
    display: flex;
    align-items: center;
}

.align-items-baseline {
    display: flex;
    align-items: baseline;
}

.align-items-end {
    display: flex;
    align-items: flex-end;
}

.align-self-baseline {
    display: flex;
    align-self: baseline;
}

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

.justify-content-around {
    display: flex;
    justify-content: space-around;
}

.justify-content-between {
    display: flex;
    justify-content: space-between;
}

.justify-content-end {
    display: flex;
    justify-content: flex-end;
}
/////////////////
.format {
    max-width: 250px;
}

.journal-data-grid {
    .ui-grid-invisible {
        display: none;
    }
}

//////////////////
.barcode-icon {
    padding: 2px 5px;
    border: solid 1px #ccc;
    -moz-transform: scale(2, 1);
    -ms-transform: scale(2, 1);
    -o-transform: scale(2, 1);
    -webkit-transform: scale(2, 1);
    transform: scale(2, 1);
    margin-left: 20px;
}

/* health contact tabs */
ul.hc-tab {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid #ccc;
    font-size: 16px;

    li {
        display: inline-block;
        cursor: pointer;
        transition: 0.3s;
        &::after {
            content: "\\";
            padding-left: 3px;
        }
        &.active, &:hover {
            color: #333;
        }
        span {
            padding: 2px;
        }
    }
}

/* correspondence personnel tab */
.correspondence-personnel-tab {
    position: relative;
    display: block;
    width: 100%;
    height: 26px;
    padding: 3px 30px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;

    span.remove-hp {
        position: absolute;
        left: 4px;
        padding: 0px 6px 3px;
        border: 1px solid #ccc;
        line-height: 1;
    }

    .attachments-badge {
        background: @mainColor;
        color: white;
        display: inline-block;
        min-width: 10px;
        padding: 3px 6px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
    }

    &.active {
        background: @mainColor;
        color: white;

        span.remove-hp {
            border: 1px solid white;
        }

        .attachments-badge {
            background: white;
            color: @mainColor;
        }
    }
}

/* client address tab */
.client-address-tab {
    text-align: center;
    border: 1px solid @mainColor;
    cursor: pointer;

    &.active {
        background: @mainColor;
        color: white;
    }
}

.document-archive-icon {
    font-size: 2em !important;
    padding-top: 20px;
}

.manifest-warning-sign  {
    color: red;
    font-size: 30px !important;
    float: left;
    margin-left: 40px !important;
    margin-right: -40px !important;
    cursor: pointer;
}

/* Correspondence note fields classes for custom tags */
.courier-font {
    font-family: 'Courier New', Courier;
}

.font-style-italic {
    font-style: italic;
}

.text-decoration-underline {
    text-decoration: underline;
}

/* Second opinion */
.second-opinion {
    margin: 0px -15px;
    padding: 0px 15px;
    
    &:hover {
        background-color: #ECECEC;
    }
}

.div-button-disabled {
    background-color: #eee;
    opacity: 1;
    cursor: not-allowed;
}

.calendar-clinic-opticians-dropdown {
    position: absolute;
    top: 34px;
    right: 0px;
    width: 50%;
    border: 1px solid #fff;
    border-radius: 4px;
    text-align: left;
    color: #333;
    background-color: #fff;
    max-height: 170px;
    overflow-y: auto;
    z-index: 10000;

    .calendar-clinic-opticians-dropdown-optician {
        padding: 2px 10px;

        &:hover {
            background-color: #adadad;
        }
    }
}

.modal-footer-custom {
    background-color: rgb(250, 250, 250);
    border-top: 1px solid rgb(238, 238, 238);
    padding: 10px 15px;
    margin-top: 16px;
        
        .primary-button {
            color: #3593d2;
        }
}