/*
#################################
####### Copyright Notice ########
#################################
This web application and its content is copyright of Apladas Manolis - © POS-SYSTEMS 2019. All rights reserved.
Any redistribution or reproduction of part or all of the contents in any form is prohibited. You may not distribute or commercially and/or personally exploit the content. Nor may you transmit it or store it in any other website or other form of electronic retrieval system.
#################################
*/

:root {
  --white: #ffffff; 
  --red:#E85E5E;
  --hoverRow: #E85E5E;
  --selectedRow: #E85E5E;
  --selectedRowBorderLeft: #E85E5E;
  --dropDownMenu: #E85E5E;
  --settingsMenuTopBorder: #E85E5E;
  --modalColor: #E85E5E;
  --regularButtonC: #fff;
  --regularButtonB: #999;
  --saveButtonC: #fff;
  --saveButtonB: #666;
  --saveButtonCHover: #fff;
  --saveButtonBHover: #E85E5E;
  --cancelButtonC: #fff;
  --cancelButtonB: #999;
  --cancelButtonCHover: #fff;
  --cancelButtonBHover: #000;
}

body,
html {
top:0;left: 0;
background-color:#F5F4F4;

-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */

}

::-webkit-scrollbar {
display: none;
}

.ui-overlay-shadow {
    box-shadow: none;
}

.ui-content {
  box-shadow: false
}

.ui-popup-container * {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

input:hover, input:focus{outline: none;}
select:disabled,input:disabled{color: #999;}

*{
scrollbar-width: none; /* Firefox implementation */
margin: 0; padding: 0;
font-family:"Open Sans";
font-size:12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

a {text-decoration:none;}

.font-small{font-size: 0.7em;}
.font-medium{font-size: 1.2em;}
.font-bold{font-weight:bold;}

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

.ui-datepicker-trigger {
 vertical-align: top;
 margin-left: 3px;
 margin-top: 6px;
 height: 16px; /* the same of textbox */
 cursor: pointer;
}

select{
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
    padding-right: 2rem !important;
    background-color:white;
padding: 5px; border:1px solid #e0e0e0;border-radius: 3px;
}

select:hover{border:1px solid #ccc;}

.datepickerInput {
    background-color:#fff;
    text-align:center;
    padding:5px 5px 5px 5px;
    border-radius:3px;
    border:none;
}

.datepickerInput:hover {background-color:#fff;}
/*
.ui-sortable-helper{cursor: move;}
*/

/* ======================================== */

.filtersContainer{width:100%;height:80px;padding: 10px 10px; background-color:#f5f5f5;color:#333;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-bottom:1px solid #d6d6d6}

.filtersContainer table tr td input{padding:3px;border:1px solid #e0e0e0;border-radius:3px;}
.filtersContainer table tr td input:hover{border-color:  #ccc;}
.filtersContainer table tr td input:focus{border-color: #E85E5E;}

.filtersTable{width:auto;height:60px; border-collapse: collapse;color:#333;text-align: left;}
.filtersTable tbody tr td{width:auto;line-height:30px;}
.filtersTable td:nth-child(1){text-align: right;padding-left: 10px;padding-right: 5px;}
.filtersTable td:nth-child(2){padding-right: 30px;}
.filtersTable td:nth-child(3){text-align: right;padding-left: 10px;padding-right: 5px;}
.filtersTable td:nth-child(4){padding-right: 30px;}
.filtersTable td:nth-child(5){text-align: right;padding-left: 10px;padding-right: 5px;}
.filtersTable td:nth-child(6){padding-right: 30px;}

.filtersTable tr td input[type=text].isNumber{width:50px;text-align: center;}

.resultsContainer{margin-top:1px;border-top:1px solid #e0e0e0;}
.resultsTable{width: calc(100vw - 300px);color:#555;text-align:left;}
.resultsTable thead{width:100%;position: sticky;top: 0px;text-align: left;font-weight:bold}
.resultsTable tbody{width:100%;position: relative;top: 0px;overflow-y: auto;overflow-x: hidden;}

.resultsTable thead tr{background-color:#ccc;color:#000;}

.resultsTable tbody tr:hover td{border-top:1px solid #ccc;border-bottom:1px solid #ccc;}


.resultsTable thead tr th{height:30px;line-height:25px;font-weight: normal;cursor: pointer;border-right:1px solid #fff;padding:0px 10px;}
.resultsTable thead tr th:nth-child(1){text-align: center;}

.resultsTable tbody tr td{height:30px;line-height:25px;font-weight: normal;cursor: pointer;padding:0px 10px;}
.resultsTable tbody tr td:nth-child(1){text-align: center;}

.zebraA{background-color:#F5F5F5;color: #000}
.zebraB{background-color:#ffffff;color: #000}

.zebraA td{border-right:1px solid #ffffff;}
.zebraB td{border-right:1px solid #f5f5f5;}

.selectedRow{background-color:#e0e0e0;color:#000;}
.selectedRow td{border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.regularButton{padding:5px;background-color:#ccc;color:#333;border-radius:3px;border:none}
.regularButton:hover{background-color:#999;color:#fff;cursor: pointer;}

.regularButtonLight{padding:5px;background-color:#d6d6d6;color:#333;border-radius:3px;border:none}
.regularButtonLight:hover{background-color:#c2c2c2;color:#fff;cursor: pointer;}






/* ======================================== */



/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */
/* ======================================== */

.mainSection2{width:calc(100vw - 200px);height:100vh;float:left;background-color:#fff;}

.topBar{width:100vw;height:20px;line-height:20px;background-color:#000;color:#fff;text-align:left;text-indent:10px;position:fixed;top:0px;left:0px;box-shadow: 0px 2px 2px #999;z-index:2;font-size:12px}
.menuBar{width:100vw;height:40px;line-height:40px;background-color:#333;position:fixed;text-align:center;z-index:2}



.tabs{height:30px;line-height:30px;float:left;border-bottom:1px solid #fff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.tabBorder{width:0.2%;height:30px;line-height:30px;float:left;background-color: #fff;}

.tabActive{color:#000;background-color:#ebebeb;border-bottom: 1px solid #ebebeb;}
.tabInactive{color:#fff;background-color:#ccc;border-bottom: 1px solid #fff;cursor: pointer;}
.tabInactive:hover{background-color:#999;color:#fff;cursor: pointer;}

#contractsDialog .tabs{height:30px;line-height:30px;float:left;border-bottom:1px solid #fff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#contractsDialog .tabBorder{width:0.2%;height:30px;line-height:30px;float:left;background-color: #fff;}

#contractsDialog .tabActive{color:#fff;background-color:#666;border-bottom: 1px solid #ebebeb;border-right: 1px solid #ebebeb;}
#contractsDialog .tabInactive{color:#fff;background-color:#B8B8B8;border-bottom: 1px solid #fff;border-right: 1px solid #fff;cursor: pointer;}
#contractsDialog .tabInactive:hover{background-color:#999;color:#fff;cursor: pointer;}

.contractDetailRoomType{text-align:center;border-radius:2px;border:none;font-size:12px;padding:5px 10px;background-color:#999;color:#fff;margin-right:5px;cursor:pointer;}

.contractDetailRooms{text-align:center;border-radius:2px;border:none;font-size:12px;padding:5px 10px;background-color:#f5f5f5;margin-right:5px;cursor:pointer;}

.contractDetailRate{text-align:center;border-radius:2px;border:none;font-size:12px;padding:5px 10px;background-color:#ccc;margin-right:5px;cursor:pointer;}
.contractDetailRate:hover{background-color: #EDFCED;color:#000;}


.mainSpace{width:100vw;height: calc(100vh - 50px);background:transparent;color:#353535;text-align:center;position:fixed;}
.mainSpaceTop{width:100%;height:30px;text-align:center;z-index:1;}

.leftSection{height:100%;float:left;text-align:left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:3px;}
.leftSectionTitle{width:85%;height:25px;line-height:25px;border-radius:3px 3px 0px 0px;background-color:var(--settingsMenuTopBorder);color:#F3F5F7;text-align:center;margin:0 auto;}

.middleSection{height:100%;float:left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.middleSectionTitle{width:100%;height:25px;line-height:25px;border-radius:3px 3px 0px 0px;background-color:#E85E5E;color:#F3F5F7;text-align:center;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.middleSectionResults{width:100%;background-color:#fff;overflow:scroll;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}



.rightSection{float:right;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.rightMenuContainer{width:100%;height:100%;margin:0 auto;text-align:center;}

#mainPage .leftSection{width:10%;}
#mainPage .middleSection{width:81%;border:1px solid #E0E0E0;border-radius:5px;}
#mainPage .middleSectionTitle{box-shadow: 0px 2px 4px #999;border-bottom: 1px solid #000;}
#mainPage .filtersContainer{width:100%;height: 70px;padding: 5px 0px; background-color:#D8D5D5;color:#333;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius: 0px 0px 3px 3px;box-shadow: 0px 2px 4px #999;}
#mainPage .middleSectionResults{height:calc(100% - 120px);margin-top:10px; box-shadow: 0px 2px 4px #999;border-radius:3px;}
#mainPage .rightSection{width:9%;}
#mainPage .rightMenuContainer{margin-top:25px;}



#reservationsPage .leftSection{width:10%;}
#reservationsPage .middleSection{width:81%;}
#reservationsPage .middleSectionTitle{box-shadow: 0px 2px 4px #999;border-bottom: 1px solid #000;}
#reservationsPage .filtersContainer{width:100%;height:70px;padding: 5px 0px 0px 0px; background-color:#e2dfdf;color:#333;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius: 0px 0px 3px 3px;box-shadow: 0px 2px 4px #999;}
#reservationsPage .middleSectionResults{height:calc(100% - 160px);margin-top:10px; box-shadow: 0px 2px 4px #999;border-radius:0px 3px 3px 3px;}
#reservationsPage .rightSection{width:9%;}
#reservationsPage .rightMenuContainer{margin-top:25px;}

#reservationsPage .middleSection .tabs{height:30px;line-height:30px;float:left;border-bottom:1px solid #fff;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;font-size:12px;border-radius: 6px 6px 0px 0px;cursor:pointer}
#reservationsPage .middleSection .tabBorder{width:4px;height:30px;line-height:30px;float:left;background-color:transparent;}

#reservationsPage .middleSection .tabActive{color:#fff;background-color:#777;border-bottom: 1px solid #666;}
#reservationsPage .middleSection .tabInactive{color:#fff;background-color:#ADADAD;border-bottom: 1px solid #ADADAD;}
#reservationsPage .middleSection .tabInactive:hover{background-color:#888;color:#fff;border-bottom: 1px solid #888;}

.editRecordTable tr td.trash{width:30px;color:#999;text-align:center;cursor:pointer}
.editRecordTable tr td.trash:hover{color: #E85E5E;}


#settingsPage .leftSection{width:15%;}
#settingsPage .middleSection{width:76%;border:1px solid #E0E0E0;border-radius:5px;}
#settingsPage .middleSectionResults{height:calc(100% - 25px);border-radius:0px 0px 3px 3px}
#settingsPage .rightSection{width:9%;}
#settingsPage .rightMenuContainer{margin-top:45px;}



/*

height: calc(100vh - 50px);

*/




#roomsTable thead tr th, #roomsTable tbody tr td {text-align: center;}

.actionButton{width:90px;height:30px;line-height: 30px; background-color:#777;color:#fff; margin-top:5px;border:none;border-radius:3px;}
.actionButton:hover{cursor: pointer;background-color:#333;color:#fff;}
.actionButton:disabled{background-color:#999;cursor: default;}

.actionButton.highlighted{width:90px;height:30px;line-height: 30px; background-color:#555;color:#fff; margin-top:5px;border:none;border-radius:3px;}
.actionButton.highlighted:hover{cursor: pointer;background-color:#333;color:#fff;}
.actionButton.highlighted:disabled{background-color:#999;cursor: default;}

#displayOrderButton{float:right;width:50px;text-align:right;margin-right:10px;cursor:pointer;}

.editRecordTable tr td input[type=text]{padding:5px;border:1px solid #ebebeb;border-radius: 3px;}
.editRecordTable tr td input[type=text]:hover{border-color:  #ccc;}
.editRecordTable tr td input[type=text]:focus{border-color: #ccc;}

.editRecordTable tr td select{padding: 5px; border:1px solid #ebebeb;border-radius: 3px;}
.editRecordTable tr td select:hover{border-color:  #ccc;}
.editRecordTable tr td select:focus{border-color: #ccc;}

.editRecordTable tr td select{
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
    padding-right: 2rem !important;
    background-color:white;
}

.editRecordTable tr td input[type=text].isNumber{width:40px;text-align: center;}

.editRecordTable tr td textarea{width:75%;padding:5px;border:1px solid #ebebeb;border-radius: 3px;}
.editRecordTable tr td textarea:hover{border-color:  #ccc;}
.editRecordTable tr td textarea:focus{border-color: #ccc;}

.editRecordTable{width:100%; border: none;overflow-y: scroll;}
.editRecordTable tr td{padding:2px 0px;text-align: left;}
.editRecordTable tr td.editRecordTableSpace{width:4%;}

.friendsfamilyTable{width: 100%; border-collapse: collapse;color:#555;text-align: left;}
.friendsfamilyTable thead{width:100%;position: sticky;top: 0px;}
.friendsfamilyTable tbody{width:100%;height:200px;position: relative;top: 0px;overflow: auto;background-color: red;}

#contractDetailsTable{color:#555;text-align: left;}
#contractDetailsTable thead{position: sticky;top: 0px;}
#contractDetailsTable tbody{position: relative;top: 0px;overflow-y: auto;overflow-x: hidden;}

.settingsTable tr td input[type=text]{width:75%;padding:5px;border:1px solid #ebebeb;border-radius: 3px;}
.settingsTable tr td input[type=text]:hover{border-color:  #ccc;}
.settingsTable tr td input[type=text]:focus{border-color: #ccc;}

.settingsTable tr td input[type=text].isNumber{width:40px;text-align: center;}

.settingsTable tr td select{width:80%; height: 30px; border:1px solid #999;border-radius: 3px;}
.settingsTable tr td select:hover{border-color:  #ccc;}
.settingsTable tr td select:focus{border-color: #ccc;}

.settingsTable tr td textarea{width:75%;padding:5px;border:1px solid #ebebeb;border-radius: 3px;}
.settingsTable tr td textarea:hover{border-color:  #ccc;}
.settingsTable tr td textarea:focus{border-color: #ccc;}

.settingsTable{width:100%; border: none;overflow-y: scroll;padding:20px}
.settingsTable tr td{padding:5px 0px;text-align: left;}
.settingsTable tr td.settingsTableSpace{width:100px;}



.regularButtonLightColor{padding:5px 10px;background-color:#ccc;color:#333;border-radius:3px;border:none}
.regularButtonLightColor:hover{background-color:#999;color:#fff;cursor: pointer;}

.largeButton{padding:20px 15px;background-color:var(--saveButtonB);color:var(--saveButtonC);border-radius:3px;border:none;font-size:150%}
.largeButton:hover{background-color:var(--saveButtonBHover);color:var(--saveButtonCHover);cursor: pointer;}

.saveButton{padding:10px 30px;background-color:var(--saveButtonB);color:var(--saveButtonC);border-radius:3px;border:none}
.saveButton:hover{background-color:var(--saveButtonBHover);color:var(--saveButtonCHover);cursor: pointer;}

.cancelButton{padding:10px 30px;background-color:var(--cancelButtonB);color:var(--cancelButtonC);;border-radius:3px;margin-left:20px;border:none}
.cancelButton:hover{background-color:var(--cancelButtonBHover);color:var(--cancelButtonCHover);cursor: pointer;}


.saveButtonS{padding:6px 18px;background-color:var(--saveButtonB);color:var(--saveButtonC);border-radius:3px;border:none}
.saveButtonS:hover{background-color:var(--saveButtonBHover);color:var(--saveButtonCHover);cursor: pointer;}

.cancelButtonS{padding:6px 18px;background-color:var(--cancelButtonB);color:var(--cancelButtonC);;border-radius:3px;margin-left:20px;border:none}
.cancelButtonS:hover{background-color:var(--cancelButtonBHover);color:var(--cancelButtonCHover);cursor: pointer;}

/* ======================================================================== */

/* DROP DOWN MENU */
.cm-e-menu {position: relative;z-index: 1000;color: #fff;}
.cm-e-menu ul {margin: 0; padding: 0;}
.cm-e-menu li {position: relative;white-space: nowrap;cursor: pointer;list-style: none;
-webkit-transition: background-color ease-in 50ms;
-moz-transition: background-color ease-in 50ms;
-ms-transition: background-color ease-in 50ms;
-o-transition: background-color ease-in 50ms;
transition: background-color ease-in 50ms;
}
.cm-e-menu li:hover {background-color:transparent;color: #F3F5F7;text-decoration: underline;}
.cm-e-menu ul li.topmenu {display: inline-table;padding: 0 1em;height:40px;line-height:40px;}
.cm-e-menu .topmenu ul {display:none;position: absolute;}
.cm-e-menu li:hover > ul {display: table;}
.cm-e-menu ul.submenu {top: 100%; left: 0;box-shadow: 1px 1px 2px #666;background-color: #444;color: #F3F5F7;height:20px;line-height:20px; border-radius:3px;text-align:left;}
.cm-e-menu ul.submenu .submenu {top: 0em; left: 100%;}
.cm-e-menu ul.submenu li {padding: .4em 1.5em;border-bottom:1px solid #ccc;}
.cm-e-menu li.divider {padding: 0;border-top: 1px solid #666;margin: .5rem auto .3rem;cursor: default;}
.cm-e-menu li.divider:hover {background-color: transparent;}

/* COLAPSIBLE VERTICAL MENU*/
.collapsible {color: #444;cursor: pointer;width: 155px;padding: 0px 0px 10px 0px;border: none;text-align: left;outline: none;margin-top: 10px;font-weight: 700;}
.active:hover, .collapsible:hover {text-decoration: underline;}
.content {padding: 0 5px;display: none;overflow: hidden;}
.content div{padding-bottom:10px;font-weight: 300;}
.content div:hover {text-decoration: underline;cursor: pointer;}

/* SPINNER*/

.lds-ellipsis {display: inline-block;position: relative;width: 80px;height: 80px;}
.lds-ellipsis div {position: absolute;top: 33px;width: 13px;height: 13px;border-radius: 50%;background: #fff;animation-timing-function: cubic-bezier(0, 1, 1, 0);}
.lds-ellipsis div:nth-child(1) {left: 8px;animation: lds-ellipsis1 0.6s infinite;}
.lds-ellipsis div:nth-child(2) {left: 8px;animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(3) {left: 32px;animation: lds-ellipsis2 0.6s infinite;}
.lds-ellipsis div:nth-child(4) {left: 56px;animation: lds-ellipsis3 0.6s infinite;}
@keyframes lds-ellipsis1 {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
@keyframes lds-ellipsis3 {
0% {transform: scale(1);}
100% {transform: scale(0);}
}
@keyframes lds-ellipsis2 {
0% {transform: translate(0, 0);}
100% {transform: translate(24px, 0);}
}

/* ===================== MODAL ======================= */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 100%;
height: 100%;
border-radius:5px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: fadein;
-webkit-animation-duration: 0.4s;
animation-name: fadein;
animation-duration: 0.4s
}

@-webkit-keyframes fadein {
from {opacity:0} 
to {opacity:1}
}

@keyframes fadein {
from {opacity:0}
to {opacity:1}
}

.modal-header {
height: 30px;
line-height: 30px;
padding:3px 15px;
background-color: var(--modalColor);
border-radius: 5px 5px 0px 0px;
color: white;
}
.modal.small .modal-header {
height: 30px;
line-height: 30px;
padding:3px 15px;
background-color: #000;
border-radius: 5px 5px 0px 0px;
color: white;
}
.modal-body {
padding: 20px;
background-color: #ebebeb;
height: 100%;
}

.modal-footer {
height: 90px;
line-height: 90px;
text-align: center;
padding:3px 15px;
background-color: #ebebeb;
border-radius: 0px 0px 5px 5px;
color: white;
}

.modal.small .modal-footer {
height: auto;
line-height: 30px;
text-align: center;
padding:3px 15px;
background-color: #ebebeb;
border-radius: 0px 0px 5px 5px;
color: white;
}

/* ===================== SWITCH ======================= */

.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E7564B;
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #7EBC89;
}
input:focus + .slider {
  box-shadow: 0 0 1px #7EBC89;
}
input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 25px;
}
.slider.round:before {
  border-radius: 50%;
}

/* ===================== SWITCH MEDIUM ======================= */

.switchM {
  position: relative;
  display: inline-block;
  width: 33.75px;
  height: 18.75px;
}

.switchM input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderM {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E7564B;
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderM:before {
  position: absolute;
  content: "";
  height: 14.25px;
  width: 14.25px;
  left: 2.25px;
  bottom: 2.25px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderM {
  background-color: #7EBC89;
}

input:focus + .sliderM {
  box-shadow: 0 0 1px #7EBC89;
}

input:checked + .sliderM:before {
  -webkit-transform: translateX(14.25px);
  -ms-transform: translateX(14.25px);
  transform: translateX(14.25px);
}
.sliderM.round {
  border-radius: 18.75px;
}

.sliderM.round:before {
  border-radius: 50%;
}


/* ===================== SWITCH SMALL ======================= */

.switchS {
  position: relative;
  display: inline-block;
  width: 22.5px;
  height: 12.5px;
}

.switchS input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderS {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #E7564B;
  background-color: #999;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderS:before {
  position: absolute;
  content: "";
  height: 9.5px;
  width: 9.5px;
  left: 1.5px;
  bottom: 1.5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderS {
  background-color: #7EBC89;
}

input:focus + .sliderS {
  box-shadow: 0 0 1px #7EBC89;
}

input:checked + .sliderS:before {
  -webkit-transform: translateX(9.5px);
  -ms-transform: translateX(9.5px);
  transform: translateX(9.5px);
}
/* Rounded sliders */

.sliderS.round {
  border-radius: 12.5px;
}

.sliderS.round:before {
  border-radius: 50%;
}



/* ===================== COLOR PICKER ======================= */

div.colorPicker-picker {
  height: 28px;
  width: 28px;
  padding: 0 !important;
  border: 1px solid #ccc;
  background: url(images/arrow.gif) no-repeat bottom right;
  cursor: pointer;
  line-height: 28px;
  font-weight:bold;
  text-align: center;
}

div.colorPicker-palette {
  width: 272px;
  position: absolute;
  border: 1px solid #598FEF;
  background-color: #EFEFEF;
  padding: 2px;
  margin-left: -68px;
  z-index: 99999999;
}
  div.colorPicker_hexWrap {width: 100%; float:left }
  div.colorPicker_hexWrap label {color: #2F2F2F; margin: 5px 2px; width: 25%}
  div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; border: 1px solid #000; width: 65%; }

div.colorPicker-swatch {
  height: 28px;
  width: 28px;
  border: 1px solid #000;
  margin: 2px;
  float: left;
  cursor: pointer;
  line-height: 28px;
}