@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(./fonts/ubuntu.woff) format('woff');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(./fonts/ubuntu-bold.woff) format('woff');
}

/*
@font-face {
  font-family: 'Regencie';
  font-style: normal;
  font-weight: 400;
  src: local('Regencie'), url(./fonts/RegencieLight.woff) format('woff');
 }

 @font-face {
   font-family: 'Regencie';
   font-style: normal;
   font-weight: 400;
   src: local('Regencie Alt'), url(./fonts/RegencieLightAlt.woff) format('woff');
  }
*/


.monospace_font {
  font-family: courier new, courier, monospace;

}

body {
  /*font-family: "Arial", Arial, serif;*/
  font-family: Ubuntu, sans-serif;
  /*background-color: rgba(128,128,128,0.05);*/
  background-color: white;
  font-size: 14px;
}

.htmlviewer {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 4px;
}

.htmlviewer[readonly] {
  background-color: #F5F5F5;
}

.ajaxloader-text {
  color: #2E64FE;
}

.vseparator {
  height: 20px;
}


.vpadding {
  padding-top: 20px;
  padding-bottom: 20px;
}

.normal {
  font-weight: normal;
}

.shortcutsinvoices {
  background-color: #d7ffd5;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-weight: bold;

}

.shortcutsinvoices-buttons {
  margin-right: 10px;
}

.vhr-left {
  border-left: 1px solid #dadada;
}

.vhr-right {
  border-right: 1px solid #dadada;
}


.pointer {
  cursor: pointer;
}

.nomargin {
  margin: 0px;
  padding: 0px;
}

.paddinglateral {
  padding: 10px !important;
}

.roundedborders {
  border-radius: 10px;
}

.control-vspacing {
  padding-top: 10px;
}

.label-vspacing {
  padding-top: 34px;
}

.label-view-record {
  font-size: 16px;
  margin-right: 10px;
}

.label-school-year {
  font-size: 14px;
}

.sexlabel {
  padding-top: 5px;
}



.pagetitle {
  font-size: 24px;
  border-bottom: 1px solid #959595;
}


.navbar-text {
  padding-left: 14px;
}



.panelcheckbox {
  margin-left: 20px;

}


.panelradiobox {
  padding-left: 20px;
  padding-bottom: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0px;
}



.panelcheckboxlist {
  margin-left: 20px;
  margin-bottom: 0px;
}


.panelcheckboxinlist {
  margin-left: 20px;
  margin-bottom: 5px;
}



.hspacing {
  margin-right: 20px;
}

.text-padding {
  padding: 20px;
}

.status {
  margin-right: -10px;
  margin-top: -20px;
}

.recordcode input[readonly] {
  font-weight: bold;
  color: red;
  font-size: 18px;
}

.recordlabel {
  font-weight: bold;
  font-size: 18px;

}

.recordheaderinfo {
  padding-left: 10px;
}

.form-padding {
  padding: 8px;
}

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

.icon-action {
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
}

.icon-rightmenu {
  float: right;
  cursor: pointer;
}

.row-active {
  /*cursor: pointer;*/
}

.row-inactive {
  color: #FF0000;
  background-color: rgba(255, 0, 0, 0.1);
}

.searchbox {
  width: 95%;
}

.btn-pad {
  margin-left: 2px;
  margin-right: 2px;
  width: 30px;
  height: 30px;
}

.btn-pad2 {
  margin-left: 2px;
  margin-right: 2px;
  padding-left: 8px;
  width: 30px;
  height: 30px;
}

.btn-padstack {
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 2px;
  padding-left: 2px;
  width: 30px;
  height: 30px;
}

.bancolor {
  color: rgba(255, 130, 130, 0.8);
}

.btn-vspacing {
  margin-top: 34px;
}

.table-active-btns {

  margin-top: -6px;
  margin-right: -10px;

}


.footer {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #F5F5F5;

}

.table-actions {
  float: right;
  padding-top: 20px;
}

.table thead>tr>td,
.table tbody>tr>td {
  vertical-align: middle;
}


#tablelistinvoices thead>tr>td.nolateralmargins,
#tablelistinvoices tbody>tr>td.nolateralmargins {
  padding-left: 0px;
  padding-right: 0px;
}

.img-valign {
  vertical-align: middle;
}

.thumbnail-logo {
  width: 150px;
}


a:hover {
  text-decoration: none;
  cursor: pointer;
}

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

.labelfont {
  font-weight: bold;
  vertical-align: middle;
  font-size: 14px;
}

.form-control[readonly] {
  /*background-color:  #F5F5F5;*/
  background-color: #fbfbfb;

}

.panelfilter {
  background-color: #F5F5F5;
}

.img-main {
  width: 200px;
  height: auto;
  max-height: 200px;
  max-width: 500px;
}

.img-profile {
  width: 150px;
  height: 150px;
  min-width: 150px;
  min-height: 150px;
}

div.img-profile {
  width: 150px;
  height: 150px;
  margin: 20px;
}

.img-secondary {
  width: 150px;
  height: 150px;
  min-width: 150px;
  min-height: 150px;
}


.img-filemanager {
  width: 100px;
  height: auto;

  max-width: 100px;
  max-height: 100px;
}

.img-fm {
  width: 50px;
  height: 50px;
  margin: 10px;
  cursor: pointer;
}

.img-table {

  width: 50px;
  max-width: 50px;
  height: auto;
  max-height: 100%;

}

.con-filemanager {
  padding-bottom: 10px;
  cursor: pointer;
}

.user-noactive {
  color: red;
}

.combobox-fieldinactive {
  color: #fff !important;
  background: #BC4444 !important;
}

.combobox-noactive {
  color: #fff !important;
  background: #f0ad4e !important;
}


.widget_dashboard {
  min-height: 300px;

}

.btn-mainwidget {
  margin-bottom: 4px;
}



/******************* modal loading *******************/


/* The Modal (background) */
.modalloading {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 20000;
  /* Sit on top */
  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(128, 128, 128, 0.8);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modalloading-content {
  background-color: rgba(50, 50, 50, 0.9);
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 250px;
  /* Could be more or less, depending on screen size */
  color: white;
}

/* The Close Button */
.closeloading {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeloading:hover,
.closeloading:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



/******************* modal loading progress*******************/


/* The Modal (background) */
.modalloadingprogress {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 20000;
  /* Sit on top */
  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(50, 50, 50, 0.9);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modalloadingprogress-content {
  background-color: rgba(50, 50, 50, 0.9);
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid rgb(155, 155, 155);
  width: 350px;
  /* Could be more or less, depending on screen size */
  color: white;
  border-radius: 4px;
}

/* The Close Button */
.closeloadingprogress {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

.closeloadingprogress:hover,
.closeloadingprogress:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.progress {
  background-image: none !important;
  background-color: #444444 !important;
  border: 1px solid #888888 !important;
}





/******************* modal dialog *******************/


/* The Modal (background) */
.modaldialog {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 20000;
  /* Sit on top */
  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(50, 50, 50, 0.9);
  /* Black w/ opacity */

}

/* Modal Content/Box */
.modaldialog-content {
  background-color: rgba(50, 50, 50, 0.9);
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid rgb(55, 55, 55);
  width: 350px;
  /* Could be more or less, depending on screen size */
  color: white;
  border-radius: 4px;
}

/* The Close Button */
.closemodaldialog {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -15px;
}

.closemodaldialog:hover,
.closemodaldialog:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}




/******************* html message *******************/


.main-msg {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  border: 1px solid #777;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}


.main-msg-icon {
  padding: 20px;
}


.main-msg-text {
  color: #777;
}

.main-msg-warning {
  color: #ec971f;
}

.main-msg-error {
  color: #d9534f;
}

.main-msg-info {
  color: #337ab7;
}

.main-msg-success {
  color: #5cb85c;
}

/***************** colors *******************/

.colorred {
  color: red;
}

.colorblue {
  color: blue;
}

.colorlblue {
  color: #5bc0de;
}

.colorgray {
  color: #ccc;
}

.colorgreen {
  color: green;
}

.bgcolorlblue {
  background-color: #def3ff !important;
}


.bgcolorlred {
  background-color: #ffdede !important;
}


.bgcolorlgreen {
  background-color: #e7ffde !important;
}

.bgcolorlgray {
  background-color: #f5f5f5 !important;
}

/************ tasks *******************/


.taskcontainer {
  background: #f0f0f0 !important;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  padding-bottom: 30px;
  width: 100%;
}

.taskcontainer-inline {
  background: #f0f0f0 !important;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  padding-bottom: 10px;
  width: 100%;
}

.tasktitle {
  font-weight: bold;
  padding-top: 20px;
}

.taskdesc {
  font-weight: normal;
  font-size: 12px;
}

.taskdate {
  font-weight: normal;
  font-size: 12px;
  padding-top: 20px;
}


.taskdate_end {
  font-weight: normal;
  font-size: 12px;
  padding-top: 20px;
  padding-left: 20px;
}

.taskstatus {
  float: right;
}

.taskclose {
  color: rgba(#959595, 0.67);
  float: right;
}

.tasktags {
  padding-top: 10px;
}

.taskinput_title {
  font-weight: bold;
  font-size: 14px;

}

.taskinputcontrol {
  padding: 6px;
  margin-left: -6px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ccc;

}

.taskgroup {
  padding: 10px;
}

.tasklabel {
  padding-right: 10px;
}

.taskstatus_option {
  font-weight: normal;
  font-size: 14px;
}

.sortable {
  list-style-type: none;
  /*margin-left: -20px;
  margin-right: 20px;*/
  padding-left: 2px;
  padding-right: 2px;
}

.taskbutton {
  color: rgb(194, 194, 194);
  cursor: pointer;
  margin: 10px;
}

.taskbutton:hover {
  color: rgb(116, 116, 116);
}



.status_option {
  font-weight: normal;
  font-size: 14px;
}

.list-group-item-header {
  background: #eee;
  font-weight: bold;
}





/*
.modal-dialog,
.modal-content {
    height: 80%;
}

.modal-body {

    max-height: calc(100% - 120px);
    overflow-y: scroll;
}
*/


/* Extract from bootstrap.css */
/*
.panel-main {
  border-color: #777;
}
.panel-main > .panel-heading {
  color: #333;
  background-color: #a0a0a0;
  border-color: #777;
}
.panel-main > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #777;
}
.panel-main > .panel-heading .badge {
  color: #fff;
  background-color: #333;
}
.panel-main > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #777;
}
*/

/* reset passsword */

.resetpasswordcontainer {
  width: 450px;
  border: 0px;
  margin-top: 50px;
  margin-bottom: 100px;
}

/* Login */

.logincontainer {
  width: 350px;
  border: 0px;
  margin-top: 50px;
  margin-bottom: 100px;
}

.loginheader {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.loginajax {
  padding-top: 30px;
}

.faloginok {
  color: #3ADD00;
  /*z-index: 10;*/
}

a.notif-link {
  color: white !important;
  background-color: rgba(0, 0, 0, 0) !important;
  cursor: pointer;
}

a.notif-link:hover,
a.notif-link:active {
  color: white !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.notif {
  color: white;
  display: inline-block;
  /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
  position: relative;
  /* All 'absolute'ly positioned elements are relative to this one */
  /*padding: 2px 5px; /* Add some padding so it looks nice */
  padding-right: 7px;
  text-align: left;
}

/* Make the badge float in the top right corner of the button */
.notif-badge {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;

  padding: 1px 3px;
  font-size: 10px;

  position: absolute;
  /* Position the badge within the relatively positioned button */
  top: -6px;
  right: -10px;
  margin-right: 6px;
  margin-top: 2px;

}

.notif-bell {
  position: absolute;
  top: -4px;
  margin-top: 4px;
}


.faloginerror {
  color: #FA5858;
  /*z-index: 10;*/
}

.inner-addon {
  position: relative;
}

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

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

.right-addon .fa {
  right: 0px;
}

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

.right-addon input {
  padding-right: 30px;
}


.breadcrumb {
  background-color: rgba(0, 0, 0, 0);
  font-size: 11px;
  margin-left: 0px;
}

/* BuildMenuNav */


.main-nav {

  background: #4D7496;

}

a.nav-item {
  color: #4D7496;
}


a.dropdown-toggle {
  color: #4D7496;
}



.main-nav button {
  background: #4D7496;
  color: #fff !important;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10;
  -o-border-radius: 10;
  border-radius: 10px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.main-nav button:focus {
  outline: none;
}

.main-nav button .icon-bar {
  background-color: #fff;
}

.main-nav .navbar-collapse {
  padding: 0;
}

/* New checkboxes and radios */

.checkbox {
  /*padding-left: 20px; */
}

.checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  margin-top: 2px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 3px;
  font-size: 11px;
  color: #555555;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
}

.checkbox input[type="checkbox"]:focus+label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked+label::after {
  font-family: 'FontAwesome';
  content: "\f00c";
}

.checkbox input[type="checkbox"]:disabled+label {
  /*opacity: 0.65;*/
}

.checkbox input[type="checkbox"]:disabled+label::before {
  background-color: #eeeeee;
  cursor: not-allowed;
}

.checkbox.checkbox-circle label::before {
  border-radius: 50%;
}

.checkbox.checkbox-inline {
  margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked+label::before {
  background-color: #428bca;
  border-color: #428bca;
}

.checkbox-primary input[type="checkbox"]:checked+label::after {
  color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked+label::before {
  background-color: #d9534f;
  border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked+label::after {
  color: #fff;
}

.checkbox-info input[type="checkbox"]:checked+label::before {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked+label::after {
  color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked+label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked+label::after {
  color: #fff;
}

.checkbox-success input[type="checkbox"]:checked+label::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked+label::after {
  color: #fff;
}

.radio {
  padding-left: 30px;
}

.radio label {
  display: inline-block;
  position: relative;
  padding-left: 5px;
}

.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: -20px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out;
  transition: border 0.15s ease-in-out;
}

.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #555555;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.radio input[type="radio"] {
  opacity: 0;
}

.radio input[type="radio"]:focus+label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.radio input[type="radio"]:checked+label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.radio input[type="radio"]:disabled+label {
  /*opacity: 0.65;*/
}

.radio input[type="radio"]:disabled+label::before {
  cursor: not-allowed;
}

.radio.radio-inline {
  margin-top: 0;
}

.radio-primary input[type="radio"]+label::after {
  background-color: #428bca;
}

.radio-primary input[type="radio"]:checked+label::before {
  border-color: #428bca;
}

.radio-primary input[type="radio"]:checked+label::after {
  background-color: #428bca;
}

.radio-danger input[type="radio"]+label::after {
  background-color: #d9534f;
}

.radio-danger input[type="radio"]:checked+label::before {
  border-color: #d9534f;
}

.radio-danger input[type="radio"]:checked+label::after {
  background-color: #d9534f;
}

.radio-info input[type="radio"]+label::after {
  background-color: #5bc0de;
}

.radio-info input[type="radio"]:checked+label::before {
  border-color: #5bc0de;
}

.radio-info input[type="radio"]:checked+label::after {
  background-color: #5bc0de;
}

.radio-warning input[type="radio"]+label::after {
  background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked+label::before {
  border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked+label::after {
  background-color: #f0ad4e;
}

.radio-success input[type="radio"]+label::after {
  background-color: #5cb85c;
}

.radio-success input[type="radio"]:checked+label::before {
  border-color: #5cb85c;
}

.radio-success input[type="radio"]:checked+label::after {
  background-color: #5cb85c;
}

/* Attached files  */

.attachfile {}

.attachfileclose {
  cursor: pointer;
}


.attachiconpdf {
  color: #ff0000;
}

.attachicongif {
  color: #13bb3d;
}

.attachiconpng {
  color: #13bb3d;
}

.attachiconjpg {
  color: #13bb3d;
}

.attachicon {
  color: #708dcc;
}

/************ Productslist show **************/

.products_attach {
  margin-left: 30px;
  margin-right: 30px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 1px solid #c7c7c7;
}

.container-product {
  background-color: #f8f8f8;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 1px solid #c7c7c7;
}


/***************** Calendar ********************/



.calendarcontainer {

  width: 100%;
  background-color: rgba(143, 139, 167, 0.08);
  background-color: red;
  padding-bottom: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;

  margin-top: 0px;
  margin-bottom: 0px;

}


.calendarmaintitle a,
.calendarmaintitle a:visited,
.calendarmaintitle a:active {
  color: #c86464;
}

.calendarmaintitle a:hover {
  color: #f52b2b;
}

.calendarmaintitle {
  padding: 10px;
  /*border-left: 4px solid #c12727;*/
  border-bottom: 3px solid #c12727;
  font-weight: bold;
  background-color: rgba(181, 82, 82, 0.08);
  color: #c86464;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;

}

.calendar-container {}

.calendar-table {
  width: 100%;
}

.calendar-title {
  text-align: center;
  width: 100%;
  border: 1px solid #ccc;
  font-weight: bold;
  background-color: #555;
  color: #fff;
}

.calendar-month {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
}

.calendar-nmonth {
  padding-right: 10px;
  padding-top: 4px;
  padding-top: 4px;
}

.calendar-pmonth {
  padding-left: 10px;
  padding-top: 4px;
  padding-top: 4px;
}

.calendar-dayweek {
  background-color: rgb(170, 170, 170);
  border: 1px solid #ccc;
  padding-left: 14px;
  padding-right: 6px;
  font-weight: bold;
}


.calendar-day {
  background-color: rgb(238, 238, 238);
  border: 1px solid #ccc;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.sunday {
  color: #ff0000;
  background-color: #ffdcdc !important;
}

.calendarevent {
  background-color: #e7f5ae;
  font-weight: bold;
  color: #3570e2;
  border: 2px solid #999999;
}


.calendarcalendarevent {
  background-color: #e7f5ae;
  font-weight: bold;
  border: 2px solid #999999;
}

.eventmark {
  font-weight: bold;
  color: #3570e2;

}

.eventmarktitle {
  font-weight: normal;


}


.eventcalendarmark {
  font-weight: bold;


}

.eventcalendarmarktitle {
  font-weight: normal;
  color: #ff0000;


}

.eventmarkcontainer {
  width: 100%;
  margin-left: 4px;
  padding-top: 10px;
  padding-left: 4px;
  background-color: rgba(21, 82, 163, 0);
}


/***************** ACalendar ********************/



.acalendarcontainer {

  width: 100%;
  background-color: rgba(143, 139, 167, 0.08);
  background-color: red;
  padding-bottom: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;

  margin-top: 0px;
  margin-bottom: 0px;

}


.acalendarmaintitle a,
.acalendarmaintitle a:visited,
.acalendarmaintitle a:active {
  color: #c86464;
}

.acalendarmaintitle a:hover {
  color: #f52b2b;
}



.acalendar-table {
  width: 100%;
}

.acalendar-title {
  text-align: center;
  width: 100%;
  border: 1px solid #000;
  font-weight: bold;
  background-color: rgb(77, 116, 150);
  color: white;
}

.acalendar-month {
  width: 100%;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 20px;
}

.acalendar-nmonth {
  padding-right: 10px;

}

.acalendar-pmonth {
  padding-left: 10px;

}

.acalendar-dayweek {
  background-color: rgb(177, 216, 250);
  border: 1px solid #000;
  padding-left: 14px;
  padding-right: 6px;
  font-weight: bold;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
}


.acalendar-day {
  background-color: #f8f8f8;
  border: 1px solid #000;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 30px;

}


.acalendar-noday {
  border: 1px solid #000;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 30px;

}

.acalendar-day:hover {
  background-color: rgb(210, 241, 255) !important;
  border: 1px solid #000;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 30px;
  cursor: pointer;

}

.acalendarday-first {
  background-color: red;
}

.acalendarday-second {
  background-color: yellow;
}


.acalendarevent {
  background-color: #e7f5ae;
  font-weight: bold;
  color: #3570e2;
  border: 2px solid #999999;
}


.acalendarcalendarevent {
  background-color: #e7f5ae;
  font-weight: bold;
  border: 2px solid #999999;
}

.aeventmark {
  font-weight: bold;
  color: #3570e2;

}

.aeventmarktitle {
  font-weight: normal;


}


.aeventcalendarmark {
  font-weight: bold;


}

.aeventcalendarmarktitle {
  font-weight: normal;
  color: #ff0000;


}

.aeventmarkcontainer {
  width: 100%;
  margin-left: 4px;
  padding-top: 10px;
  padding-left: 4px;
  background-color: rgba(21, 82, 163, 0);
}

/************************ boxsearch ****************/

.boxsearch {
  border: 1px solid #ccc;
  padding: 10px;
  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);
}

.rowselectboxdiv {
  padding: 2px;
}

.selectboxdiv {
  max-height: 1000px !important;
  overflow: auto;

  margin: 10px;
}

​
/***********************   students **************/

.studentref {
  font-weight: bold;
}

a .form-control[readonly] {
  color: #4D7496
}

.student_btn_close {
  color: #ff5555 !important;
  cursor: pointer !important;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.student_btn_close:hover {
  color: #ffffff !important;
  cursor: pointer !important;
  padding: 4px;
  border: 1px solid red;
  background-color: #ff5555;
  border-radius: 4px;
}

.menu_student {
  vertical-align: middle;
}

a.list-group-item:hover {
  background-color: #4D7496;
  color: white;
}

a.list-group-subitem {
  background-color: #6183a2 !important;
  color: white !important;
}

a.list-group-subitem:hover {
  background-color: #4D7496 !important;
  color: white !important;
}




/***********************   detaillines **************/




/******************** GOOGLE MAPS RESPONSIVE *****************/

.google-maps {
  position: relative;
  padding-bottom: 75%;
  /* This is the aspect ratio */
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}



/************* widget js ***************/

.mythoNumber {
  text-align: right;
}

.mythoNumber-validate {
  padding-right: 60px;
}

.mythoNumber-novalidate {
  padding-right: 20px;
}

.mytho-widget-dropdown {
  color: #ccc;
  position: relative;
  /*top: 2px;*/
}

.mytho-widget-dropdown .btn {
  position: absolute;

  padding-top: -10px;

}

.mytho-widget-dropdown .btn:active {
  position: absolute;

  padding-top: -10px;
  -webkit-box-shadow: none;
  box-shadow: none;

}

.widget-left-addon .btn {
  left: 0px;
}

.widget-left-addon .btn :hover {
  left: 0px;
  color: #4D7496;
}

.widget-right-addon .btn {
  right: 0px;
  color: #ccc;
  top: 30px;
}

.widget-right-addon .btn :hover {
  right: 0px;
  top: 30px;
  color: #4D7496;
}

.mytho-widget-dropdown .dropdown-menu {
  margin-top: 60px;
  right: 0px;
  left: auto;
}

.mytho-widget-novalidate {
  /*margin-right: 10px;*/
}

.mytho-widget-validate {
  margin-right: 30px;
}




/************* invoices ***************/


.detaillinediv {
  padding-bottom: 10px;
  border-bottom: 1px solid #4D7496;
  margin-left: 0px;
  margin-right: 0px;
  padding-right: 16px;
  margin-top: 10px;

}

.invoice-control {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.invoice-line {
  margin-left: 0px;
  border-bottom: 0px;
  padding-bottom: 4px;
}

.invoice-line .invoice-control {

  margin-bottom: 0px;
  margin-top: 0px;
  padding-top: 0px;
}


.invoice-control div.widget-right-addon a.btn {
  top: 6px;
}

.invoice-control div.widget-right-addon a.btn :hover {
  top: 6px;
  color: #4D7496;
}

.invoice-control div.widget-right-addon ul.dropdown-menu {
  top: -24px;
}

.invoice-header {
  display: none;
}

.invoice-label-footer {
  display: block;
  font-weight: bold;
  padding: 6px 12px;
  height: 34px;
}

.invoice-label-first {
  padding-left: 24px;
}

.invoice-delete-line {
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 30px;
}

.invoice-delete-line-void {
  padding-left: 0px;
}

.invoice-delete-link {
  color: #ccc;
}

.invoice-delete-link :hover {
  color: red;
  cursor: pointer;
}


#widget-dto.invoice-control div.widget-right-addon a.btn {
  top: 30px;
}

#widget-dto.invoice-control div.widget-right-addon a.btn :hover {
  top: 6px;
  color: #4D7496;
}

#widget-dto.invoice-control div.widget-right-addon ul.dropdown-menu {
  top: 0px;
}



@media(min-width:768px) {
  .invoice-label {
    padding-left: 0px;
  }

  .invoice-label-first {
    padding-left: 0px;
  }

  .invoice-delete-line-void {
    padding-left: 0px;
  }

  .invoice-delete-line {
    padding-top: 30px;
  }

  .invoice-line {
    margin-left: 0px;
    border-bottom: 0px;
    padding-bottom: 4px;
  }

  .invoice-line .invoice-control {

    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
  }


  .invoice-control div.widget-right-addon a.btn {
    top: 6px;
  }

  .invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  .invoice-control div.widget-right-addon ul.dropdown-menu {
    top: -24px;
  }




  #widget-dto.invoice-control div.widget-right-addon a.btn {
    top: 30px;
  }

  #widget-dto.invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  #widget-dto.invoice-control div.widget-right-addon ul.dropdown-menu {
    top: 0px;
  }

}


@media(min-width:992px) {

  .invoice-label {
    padding-left: 0px;
  }

  .invoice-label-first {
    padding-left: 0px;
  }

  .invoice-delete-line-void {
    padding-left: 0px;
  }

  .invoice-delete-line {
    padding-top: 30px;
  }

  .invoice-line {
    margin-left: 0px;
    border-bottom: 0px;
    padding-bottom: 4px;
  }

  .invoice-line .invoice-control {

    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
  }


  .invoice-control div.widget-right-addon a.btn {
    top: 6px;
  }

  .invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  .invoice-control div.widget-right-addon ul.dropdown-menu {
    top: -24px;
  }




  #widget-dto.invoice-control div.widget-right-addon a.btn {
    top: 30px;
  }

  #widget-dto.invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  #widget-dto.invoice-control div.widget-right-addon ul.dropdown-menu {
    top: 0px;
  }

}

@media (min-width: 1200px) {

  .invoice-label {
    display: none;

  }

  .invoice-header {
    display: block !important;
  }

  .invoice-line {
    margin-left: 0px;
    border-bottom: 0px;
    padding-bottom: 4px;
  }

  .invoice-line .invoice-control {

    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
  }


  .invoice-control div.widget-right-addon a.btn {
    top: 6px;
  }

  .invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  .invoice-control div.widget-right-addon ul.dropdown-menu {
    top: -24px;
  }



  #widget-dto.invoice-control div.widget-right-addon a.btn {
    top: 6px;
  }

  #widget-dto.invoice-control div.widget-right-addon a.btn :hover {
    top: 6px;
    color: #4D7496;
  }

  #widget-dto.invoice-control div.widget-right-addon ul.dropdown-menu {
    top: -24px;
  }

  .invoice-delete-line {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
  }

  .invoice-delete-line-void {
    padding-left: 17px;
  }

  .invoice-label-first {
    padding-left: 24px;
  }


}


/**************** languages **************/

.flagalign {
  vertical-align: middle;
}



/****************************************************************/
/* imagenes en grises                                           */
/****************************************************************/




.grayscale {

  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  /* Para cuando es estándar funcione en todos */
  filter: Gray();
  /* IE4-8 and 9 */

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.grayscale:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.responsible {
  max-width: 100%;
  max-height: 100%;
}

.student_img {
  max-width: 150px;
  max-height: auto;
}

.sizeable {
  width: 95%;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sizeable:hover,
.sizeable:focus {
  width: 105%;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

}

.scale-sm {
  max-width: 40px;
  cursor: pointer;
}

.hseparator {
  margin-left: 10px;
  margin-right: 10px;
}

.tagslist {
  border: 1px solid red;

  max-height: 130px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
}

.tagscontrols {
  margin-right: 15px;
  margin-left: 0px;
}

.subcontainer {
  padding-left: 0px;
  padding-right: 0px;
}

.nohspace {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 2px;
}

.vbutton {
  margin-top: 2px;
}


/******************* payments ******************/


.payment_item {
  font-size: 14px;
}

.invoicescheckbox {
  top: -2px;
}

.tdpaymentsup {
  /*border-bottom: 1px solid #ccc !important;*/

}


/**************************** labels extended ***********************/

.label-pink {
  background-color: #DE76CE;
}

.label-pink[href]:hover,
.label-pink[href]:focus {
  background-color: #B24AA3;
}

.label-darkyellow {
  background-color: #ecda8b;
}

.label-darkyellow[href]:hover,
.label-darkyellow[href]:focus {
  background-color: #a89334;
}

.label-purple {
  background-color: #8676d1;
}

.label-purple[href]:hover,
.label-purple[href]:focus {
  background-color: #4e408f;
}


.label-darkpink {
  background-color: #d17691;
}

.label-darkpink[href]:hover,
.label-darkpink[href]:focus {
  background-color: #8f334f;
}


.label-yellow {
  background-color: #CAD647;
}

.label-yellow[href]:hover,
.label-yellow[href]:focus {
  background-color: #9CA43F;
}


.label-black {
  background-color: #000;
}

.label-black[href]:hover,
.label-black[href]:focus {
  background-color: #707070;
}


.label-greenlight {
  background-color: #98FF91;
}

.label-greenlight[href]:hover,
.label-greenlight[href]:focus {
  background-color: #52C44A;
}


.badge-danger {
  background-color: #d43f3a;
}

.badge-warning {
  background-color: #d58512;
}

.badge-success {
  background-color: #398439;
}

.badge-info {
  background-color: #269abc;
}

.badge-inverse {
  background-color: #333333;
}


.badge-pink {
  background-color: #DE76CE;
}

.badge-yellow {
  background-color: #CAD647;
}

.badge-black {
  background-color: #000;
}

.badge-greenlight {
  background-color: #98FF91;
}



/**************************** colors extended ***********************/
.color-gray-light {
  color: #ccc;
}

.color-lightblue {
  color: #aad7ff;
}

.color-blue {
  color: #337ab7;
}

.color-yellow {
  color: #fff45f;
}

.color-red {
  color: #d9534f;
}

.color-orange {
  color: #eca31b;
}

.color-green {
  color: #22FF44;
}

.color-green-dark {
  color: #227744;
}

.color-white {
  color: white;
}

.bg-color-red {
  background-color: rgba(217, 83, 79, 0.1);
}

.bg-color-green {
  background-color: rgba(51, 255, 145, 0.1);
}

.bg-color-gold {
  background-color: #f5d443a9;
}

.color-gold {
  color: #f5d443a9;
}

.bg-color-gray {
  background-color: #a1dbfc;
}

.color-black {
  color: black;
}


/************************ Buttons Extended **************************/

.btn-malva {
  background-image: -webkit-linear-gradient(top, #a36ad1 0%, #6c2688 100%);
  background-image: -o-linear-gradient(top, #a36ad1 0%, #6c2688 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a36ad1), to(#6c2688));
  background-image: linear-gradient(to bottom, #a36ad1 0%, #6c2688 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  background-repeat: repeat-x;
  border-color: #6c2688;
  color: white;
}

.btn-malva:hover,
.btn-malva:focus {
  background-color: #6c2688;
  background-position: 0 -15px;
  color: white;
}

.btn-malva:active,
.btn-malva.active {
  background-color: #6c2688;
  border-color: #a36ad1;
  color: white;
}



.btn-lmalva {
  background-image: -webkit-linear-gradient(top, #d16ab7 0%, #ad469e 100%);
  background-image: -o-linear-gradient(top, #d16ab7 0%, #ad469e 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d16ab7), to(#ad469e));
  background-image: linear-gradient(to bottom, #d16ab7 0%, #ad469e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  background-repeat: repeat-x;
  border-color: #ad469e;
  color: white;
}

.btn-lmalva:hover,
.btn-lmalva:focus {
  background-color: #ad469e;
  background-position: 0 -15px;
  color: white;
}

.btn-lmalva:active,
.btn-lmalva.active {
  background-color: #ad469e;
  border-color: #d16ab7;
  color: white;
}



.btn-yellow {
  background-image: -webkit-linear-gradient(top, #f4eeb3 0%, #d7da35 100%);
  background-image: -o-linear-gradient(top, #f4eeb3 0%, #d7da35 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f4eeb3), to(#d7da35));
  background-image: linear-gradient(to bottom, #f4eeb3 0%, #d7da35 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  background-repeat: repeat-x;
  border-color: #d7da35;
  color: #55570c;
}

.btn-yellow:hover,
.btn-yellow:focus {
  background-color: #d7da35;
  background-position: 0 -15px;
  color: #55570c;
}

.btn-yellow:active,
.btn-yellow.active {
  background-color: #d7da35;
  border-color: #f4eeb3;
  color: #55570c;
}


.btn-lgreen {
  background-image: -webkit-linear-gradient(top, #acd7ac 0%, #7fcb7f 100%);
  background-image: -o-linear-gradient(top, #acd7ac 0%, ##7fcb7f 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#acd7ac), to(##7fcb7f));
  background-image: linear-gradient(to bottom, #acd7ac 0%, ##7fcb7f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  background-repeat: repeat-x;
  border-color: #539a53;
  color: white;
}

.btn-lgreen:hover,
.btn-lgreen:focus {
  background-color: #7fcb7f;
  background-position: 0 -15px;
  color: white;
}

.btn-lgreen:active,
.btn-lgreen.active {
  background-color: #7fcb7f;
  border-color: #8fcf8f;
  color: white;
}

/************************ building ************************/

.building_msg {
  padding: 20px;
  font-size: 30px;
  text-align: center;
}



/************************ comunicados ************************/

.comunicado_show {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
}

.comunicados_table {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
}




/**************************** mainwidget ***********************/



.hseparatorline {
  margin-top: 8px;
  border-top: 1px solid #ccc;
  margin-bottom: 8px;
}



.mainwidget-panel {
  color: #41576a;
  margin-top: 16px;
  margin-bottom: 10px;
}

.mainwidget {
  margin: -10px;

  background-color: white;

}

.mainwidget-task {
  border: 1px solid #ccc;
}



.mainwidget-title {
  border: 1px solid #45474b;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 20px;
  background-color: #546370;
  color: rgb(170, 255, 168);
}

.mainwidget-subtitle {
  font-size: 12px;
  padding-left: 10px;
}

.mainwidget-body {

  padding: 4px;
  min-height: 50px;
  border-left: 1px solid #546370;
  border-right: 1px solid #546370;
  border-bottom: 1px solid #546370;
}


.mainminiwidget {
  font-size: 10px;
  color: #41576a;
  min-height: 20px;
  margin-bottom: 0px;
  margin-top: 5px;
  border-right: 1px solid #ddd;
  padding: 0px;
}

.mainminiwidget-title {
  margin: 0px;
  padding: 0px;
}

.mainminiwidget-body {
  margin: 0px;
  padding: 0px;
}

.mainminiwidget-h2 {
  font-size: 24px;
  font-weight: bold;
}

.mainwidget-fixsize {
  min-height: 300px;
}

.mainwidget-refresh {
  font-size: 14px;
  color: #ccc;
  padding-top: 4px;
}


.mainwidget-refresh:hover {
  font-size: 14px;
  color: #fff;
  padding-top: 4px;
}

.table-users {
  font-size: 12px;
  max-height: 250px;
  min-height: 250px;
}

.table-users-log {
  font-size: 11px;
  max-height: 250px;
  min-height: 250px;

}

.table-users-tr {
  padding: 2px !important;
}



/************************* opciones especiales *************************/

.btnBigOption {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  text-align: center;
  vertical-align: middle;
  color: #ccc;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10;
  -o-border-radius: 10;
  border-radius: 10px;

  webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

  font-size: 20px;
}

.btnBigOption:hover {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  text-align: center;
  vertical-align: middle;
  background-color: #ccc;
  color: white;
  cursor: pointer;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10;
  -o-border-radius: 10;
  border-radius: 10px;

  webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btnListOptions {
  width: 100%;
}

.btnSmallOption {
  width: 100px;
  height: 68px;
  border: 2px solid #4D7496;
  text-align: center;
  background-color: #ccc;
  color: #4D7496;
  vertical-align: middle;
  padding-top: 6px;

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10;
  -o-border-radius: 10;
  border-radius: 10px;

  webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

  font-size: 12px;
  padding-top: 4px;
  margin: 6px;

  display: inline-block;
}

.btnSmallOption:hover {
  border: 2px solid #ccc;
  background-color: #4D7496;
  color: white;
  cursor: pointer;
}

.btnSmallOptionGreen {
  border: 2px solid #51964d;
  background-color: #c4ffd1;
  color: #60964d;
}


.btnSmallOptionGreen:hover {
  border: 2px solid #c4ffd1;
  background-color: #51964d;
  color: white;
  cursor: pointer;
}


.btnSmallOptionBlue {
  border: 2px solid #415EDB;
  background-color: #94A4EA;
  color: #ffffff;
}


.btnSmallOptionBlue:hover {

  border: 2px solid #94A4EA;
  background-color: #415EDB;
  color: white;
  cursor: pointer;
}


.btnSmallOptionLBlue {
  border: 2px solid #94a5ee;
  background-color: #cad2f2;
  color: #122ea4;
}


.btnSmallOptionLBlue:hover {

  border: 2px solid #cad2f2;
  background-color: #94a5ee;
  color: #ffffff;
  cursor: pointer;
}

.btnSmallOptionRed {

  border: 2px solid #964D56;
  background-color: #FFC4D1;
  color: #964D58;
}


.btnSmallOptionRed:hover {

  border: 2px solid #FFC4CB;
  background-color: #964D5A;
  color: white;
  cursor: pointer;

}


.btnSmallOptionYellow {

  border: 2px solid #96944d;
  background-color: #fff7c4;
  color: #96944d;

}


.btnSmallOptionYellow:hover {

  border: 2px solid #fff7c4;
  background-color: #968f4d;
  color: white;
  cursor: pointer;

}


.btnSmallOptionPurple {

  border: 2px solid #7b4d96;
  background-color: #dec4ff;
  color: #7b4d96;

}


.btnSmallOptionPurple:hover {
  border: 2px solid #dec4ff;
  background-color: #7b4d96;
  color: white;
  cursor: pointer;
}


.btnSmallOptionPink {
  border: 2px solid #964d89;
  background-color: #fcc4ff;
  color: #964d89;
}


.btnSmallOptionPink:hover {
  border: 2px solid #fcc4ff;
  background-color: #964d89;
  color: white;
  cursor: pointer;

}


.btnSmallOptionTeal {

  border: 2px solid #4d9687;
  background-color: #c4ffec;
  color: #4d9687;
}


.btnSmallOptionTeal:hover {

  border: 2px solid #c4ffec;
  background-color: #4d9687;
  color: white;
  cursor: pointer;
}



.btnSmallOptionGray {

  border: 2px solid #939393;
  background-color: #dbdbdb;
  color: #8a8a8a;
}


.btnSmallOptionGray:hover {

  border: 2px solid #dbdbdb;
  background-color: #939393;
  color: white;
  cursor: pointer;
}








.processtitle {
  border-bottom: 1px solid #ccc;
  margin-left: 6px;
}



@media(max-width:768px) {
  .btnBigOption {
    width: 150px;
    height: 150px;
    font-size: 14px;
  }

  .btnBigOption:hover {
    width: 150px;
    height: 150px;
    font-size: 14px;
  }
}





/************************* WIZARD *************************/



.wizard_step {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  background-color: #4D7496;
  color: white;
  padding: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;

  border-radius: 100%;
}

.wizard_title {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  color: #4D7496;
  vertical-align: middle;
  padding: 10px;
}

.wizard_title_inactive {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  color: #ccc;
  vertical-align: middle;
  padding: 10px;
}

.wizard_step_inactive {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  background-color: #ccc;
  color: white;
  padding: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;

  border-radius: 100%;
}

.wizard_content {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 0px;
}



@media(max-width:768px) {

  .wizard_step {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    background-color: #4D7496;
    color: white;
    padding: 4px;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;

    border-radius: 100%;
  }

  .wizard_title {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: #4D7496;
    vertical-align: middle;
    padding: 4px;
  }

  .wizard_title_inactive {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: #ccc;
    vertical-align: middle;
    padding: 4px;
  }

  .wizard_step_inactive {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    background-color: #ccc;
    color: white;
    padding: 4px;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;

    border-radius: 100%;
  }

  .wizard_content {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 0px;
  }


}





/************************* avisos *************************/

.warningbox {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 20px;
  font-size: 16px;
  background-color: #ffdddd;
  color: #ff0000;
  border: 1px solid #ff0000;
}


/************************** frontend ***************************/


.area-comentarios-title {
  font-size: 22px;
  font-weight: bold;
}

.area-comentarios {
  font-size: 18px;
}

.period-title {
  font-size: 24px;
  font-weight: bold;
  color: blue;
}

.period-title-note {
  font-size: 24px;
  font-weight: bold;
}


/* HORARIOS */

table.tablehorario thead th {
  background-color: rgb(70, 70, 70);
  color: white;
}



/************** aux ****************/

.header-tema {
  border-left: 3px solid #1964a1;
  background: #d3ebff;
  padding: 6px;
  padding-left: 20px;
  margin-top: 10px;
}

.horizontal-line-blue {
  padding-top: 20px;
  border-bottom: 3px solid #1964a1;
}

.hide-inline-in-mobile {
  display: inline-block;
}

.hide-in-mobile {
  display: block;
}

.hide-in-large {
  display: block;
}


@media(max-width:768px) {
  .hide-in-mobile {
    display: none;
  }

  .hide-inline-in-mobile {
    display: none;
  }
}


@media(min-width:767px) {
  .hide-in-large {
    display: none;
  }
}



/*************** fontsize para aulavirtual ***************/

.h2aula {
  font-size: 30px;
}

.h3aula {
  font-size: 24px;
}

.h4aula {
  font-size: 18px;
}

.h5aula {
  font-size: 14px;
}


@media(max-width:768px) {
  .h2aula {
    font-size: 20px;
  }

  .h3aula {
    font-size: 18px;
  }

  .h4aula {
    font-size: 14px;
  }

  .h5aula {
    font-size: 12px;
  }
}


.circlebordered {
  border-radius: 100%;
  background-color: rgb(52, 130, 199);
  padding: 10px;
  color: rgb(255, 255, 255);
  font-weight: bold;
}

.shadow {
  -webkit-box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.2);
}





/*notas */

.cuadronotas {
  max-width: 1000px;
  overflow: scroll;
}



@media(max-width:400px) {
  .cuadronotas {
    max-width: 200px;
    overflow: scroll;
  }
}


@media (min-width: 401px) and (max-width:500px) {
  .cuadronotas {
    max-width: 400px;
    overflow: scroll;
  }
}

@media (min-width: 501px) and (max-width:768px) {
  .cuadronotas {
    max-width: 600px;
    overflow: scroll;
  }
}

@media (min-width: 769px) and (max-width:1000px) {
  .cuadronotas {
    max-width: 400px;
    overflow: scroll;
  }
}

@media (min-width: 1001px) and (max-width:1200px) {
  .cuadronotas {
    max-width: 600px;
    overflow: scroll;
  }
}

@media (min-width: 1201px) and (max-width:1600px) {
  .cuadronotas {
    max-width: 800px;
    overflow: scroll;
  }
}