/* Set the prefered main font */
html , body 
{
  font-family: "Roboto" , sans-serif;  
  background-color: #ececec;
  height: auto;
}

/* Disable text decoration*/
a { text-decoration: none !important; }
a:hover { color: black; }

/* Disabled outline*/

select , input , textarea 
{
  outline: none !important;
}

select 
{
  display: initial;
  border: 1px solid #908f8f;
}

.row .col /* Make better row padding */
{
  padding: 0 7px;
}

hr.mini { margin: 5px 0px; }

/* Navbar */

.navbar
{
  background-color: #007aff;
  z-index: 100;
  position: relative;
  line-height: 0px;
  min-width: 300px;
}

.sidenav-opener i { font-size: 32px !important; }

.sidenav-open { padding-left: 250px; }

.sidenav { width: 250px; }

.main
{
  background-color: #ececec;
  height: calc( 100vh - 64px );
}

nav , .main
{
  transition: all 0.2s linear;
}

.main-wrapper-a
{
  padding: 25px;
  background-color: #ececec; /* Same as .main */
}

.main-wrapper-b
{
  background-color: white;
  box-shadow: -1px 2px 8px 0px #5f5c5c;
  border-radius: 1px;
}

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


/* Panel | Side menu */
/*header , footer , nav , .main { padding-left: 300px; }

@media only screen and (max-width : 992px) 
{
  header , footer , nav , .main { padding-left: 0; }
}*/

.panel-link.active
{
  /*background-color: #0fff6414 ;*/
  color: #007aff;
  transition: all 0.5s linear;
  box-shadow: inset 5px 0px 0px 0px #007aff;
}

.panel-link.active > i.material-icons
{
  color: #007aff !important;
}

.panel-link { padding-left: 15px !important; }

.panel-link > p
{
  font-size: 15px;;
  font-weight: 500;
  letter-spacing: 0.045em;
  margin: 0;
}

.panel-link > i
{
  color: black !important;
  margin-right: 20px !important;
}

/*.magna-logo { margin-bottom: 16px; }*/
.magna-logo > img 
{   
  position: relative;
  padding: 5px 0px;
  left: 55px;
}

@media (max-width: 500px) 
{
  nav.sidenav-open , .main.sidenav-open
  {
    width: 550px;
  }  
}

/* Login */

.login-wrapper
{  
  width: 350px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.at-center
{
  display: flex;
  margin: auto;
}

/* Uk-tab */

.uk-tab
{
  border-bottom: 1px solid #00a8e6;
}

.uk-tab > li > a 
{
  color: #444;
}

.uk-tab > li > a:hover
{
  color: #444;
  background: transparent;
  border: none;
  border-bottom: 2px solid #007dfd;
  padding-bottom: 8px !important;
  margin-bottom: -5px !important;
}

.uk-tab > li.uk-active > a
{
  border: none;
  border-bottom: 2px solid blue;
  margin-bottom: -5px !important;
}

/* Inputs */

input { font-size: 18px !important; }

input[type=range] { margin: 0; }

input[type=range]::-webkit-slider-thumb
{
  width: 20px;
  height: 20px;
  margin-top: -9px;
}

textarea { font-size: 16px; }

.datepicker-controls .select-month input 
{
  width: 100px;
}

select.datepicker-select
{
  display: none;
}

/* Materialize Checkbox */

[type="checkbox"] + span:not(.lever)
{
  padding-left: 30px;
}

[type="checkbox"].filled-in + span:not(.lever):before
{
  top: 3px !important;
}

[type="checkbox"].filled-in + span:not(.lever):after
{
  top: 3px !important;
}

/* Table - General */

.actions > i.material-icons
{
  border-radius: 50%;
  font-size: 28px;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  margin-right: 10px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}

.actions > i.material-icons:hover
{
  background: #007aff;
  color: white;
}

.actions > i.alt
{
  padding-left: 1px;
  padding-top: 0px;
} 

/* UIkit Notify */

.uk-notify.uk-notify-top-center
{
  transform: translateX(-50%);
  left: 50% !important;
  z-index: 1500 !important;
  margin: 0 !important;
  width: 50%;
}

.uk-notify-message
{
  text-align: center !important;
  padding: 5px !important;
  border-radius: 5px;
}

/* Sections - General */

.section-title
{
  color: black;
  text-align: center;
  background-color: #c5c5c5a1;
  border-bottom: 1px solid #007aff;
}

/* Buttons */
.btn-small 
{ 
  font-size: 10px;
  padding: 0 5px; 
}

.btn-mini
{ 
  font-size: 14px;
  line-height: 26px;
  padding: 0 5px; 
  height: auto;
}

@media (max-width: 551px) 
{
  .btn.icon > span { display: none; }
  .btn.icon > i { font-size: 22px !important; } 
}

/* UIKit Dialog */

.uk-modal-dialog 
{
  border-radius: 4px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  padding: 24px;
}

.uk-modal-content
{
  font-size: 16px;
}

/* JS Modal */

.js-modal-confirm
{
  min-width: 50px;
  font-size: 15px;
  background-color: #007aff;
  color: white;
}

.js-modal-confirm:hover
{
  background-color: #19766d;
}

.js-modal-confirm-cancel
{
  min-width: 50px;
  background-color: #ff9711 !important;
  color: white !important;
  margin-right: 5px;
  font-size: 15px;
}

.js-modal-confirm-cancel:hover
{
  background-color: #eb8400 !important;
}

/* FabricJS Canvas */
.canvas-container > *
{
  border: 1px solid gray;
}

/* Fa icon button */

.fa-icon-btn
{
  display: flex;
}

.fa-icon-btn > input
{
  padding-right: 35px !important;
}

.fa-icon-btn > i
{
  font-size: 24px;
  position: relative;
  top: 13px;
  left: -27px;
}

/* input-field */ 

.input-field.i-checkbox 
{
  height: 51px ;
}

/*.input-field > label 
{
  padding-left: 40px;
}

.input-field > label:active
{
  padding-left: 50px;
}

/* UI-Select */

.ui-select-container .selectize-input
{
  background-image: linear-gradient( transparent , transparent ) !important;
  background-color: transparent !important;
}

.ui-select-container input
{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;  
  background-color: transparent !important;
  height: 18px !important;
}

.ui-select-container input::placeholder { color: #969696; }

.selectize-dropdown .option, .selectize-dropdown .optgroup-header 
{
  padding: 8px 8px;
  font-size: 14px;
}

/* Materialize switch */

.switch label
{
  font-size: 14px;
  color: black;;
}

.switch label input[type=checkbox]+ .lever
{
  margin: 0 10px 0 10px;
}

.switch label input[type=checkbox]:checked + .lever
{
  background-color: white;
}