/* === Custom Base Styles === */
@import url('custom-components/buttons.css');
@import url('custom-components/cards.css');
@import url('custom-components/forms.css');
@import url('custom-components/tables.css');
@import url('custom-components/alerts.css');
@import url('custom-components/modals.css');
@import url('custom-components/breadcrumbs.css');
@import url('custom-components/progress.css');
@import url('custom-components/tabs.css');
@import url('custom-components/badges.css');
@import url('custom-components/pagination.css');
@import url('custom-components/spinners.css');
@import url('custom-components/custom-list-group.css');

/* Roboto Thin (100) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Thin.eot');
	src: local('Roboto Thin'), local('Roboto-Thin'),
		url('../fonts/roboto/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Thin.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Thin.woff') format('woff'),
		url('../fonts/roboto/Roboto-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-ThinItalic.eot');
	src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
		url('../fonts/roboto/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-ThinItalic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-ThinItalic.woff') format('woff'),
		url('../fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
	font-weight: 100;
	font-style: italic;
}
 
/* Roboto Light (300) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Light.eot');
	src: local('Roboto Light'), local('Roboto-Light'),
		url('../fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Light.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Light.woff') format('woff'),
		url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-LightItalic.eot');
	src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
		url('../fonts/roboto/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-LightItalic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-LightItalic.woff') format('woff'),
		url('../fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}
 
/* Roboto Regular (400) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Regular.eot');
	src: local('Roboto'), local('Roboto-Regular'),
		url('Roboto-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Regular.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Regular.woff') format('woff'),
		url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Italic.eot');
	src: local('Roboto Italic'), local('Roboto-Italic'),
		url('../fonts/roboto/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Italic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Italic.woff') format('woff'),
		url('../fonts/roboto/Roboto-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}
 
/* Roboto Medium (500) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Medium.eot');
	src: local('Roboto Medium'), local('Roboto-Medium'),
		url('../fonts/roboto/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Medium.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Medium.woff') format('woff'),
		url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-MediumItalic.eot');
	src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
		url('../fonts/roboto/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-MediumItalic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-MediumItalic.woff') format('woff'),
		url('../fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
}
 
/* Roboto Bold (700) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Bold.eot');
	src: local('Roboto Bold'), local('Roboto-Bold'),
	url('Roboto-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Bold.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Bold.woff') format('woff'),
		url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-BoldItalic.eot');
	src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
		url('../fonts/roboto/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-BoldItalic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-BoldItalic.woff') format('woff'),
		url('../fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}
 
/* Roboto Black (900) */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Black.eot');
	src: local('Roboto Black'), local('Roboto-Black'),
		url('../fonts/roboto/Roboto-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-Black.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-Black.woff') format('woff'),
		url('../fonts/roboto/Roboto-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-BlackItalic.eot');
	src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
		url('../fonts/roboto/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/roboto/Roboto-BlackItalic.woff2') format('woff2'),
		url('../fonts/roboto/Roboto-BlackItalic.woff') format('woff'),
		url('../fonts/roboto/Roboto-BlackItalic.ttf') format('truetype');
	font-weight: 900;
	font-style: italic;
}

/* Базовые настройки */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #212529;
  background-color: #fff;
  font-size: 1rem; /* 1rem = 16px — это базовый размер */
  line-height: 1.5; /* Оптимальная читаемость */
}

/* Основные стили заголовков */
h1 {
  font-size: 2rem;
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
  font-weight: 700; /* Более жирный */
  letter-spacing: -0.02em; /* Чуть плотнее буквы */
}

h2 {
  font-size: 1.75rem;
  margin-top: 1rem;
  margin-bottom: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.5rem;
  margin-top: 0.8rem;
  margin-bottom: 0.6rem;
  font-weight: 600; /* Чуть полегче */
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.25rem;
  margin-top: 0.6rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0em;
}

h5 {
  font-size: 1.125rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  font-weight: 500; /* Еще легче */
  letter-spacing: 0.005em;
}

h6 {
  font-size: 1rem;
  margin-top: 0.4rem;
  margin-bottom: 0.3rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Адаптив для маленьких экранов */
@media (max-width: 575.98px) {
  h1 {
	font-size: 1.75rem;
  }
  h2 {
	font-size: 1.5rem;
  }
  h3 {
	font-size: 1.25rem;
  }
  h4 {
	font-size: 1.125rem;
  }
  h5 {
	font-size: 1rem;
  }
  h6 {
	font-size: 0.875rem;
  }
}

em {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

code {
  border: 1px solid #f3f6f9;
  background-color: #ffffff;
  border-radius: .25rem;
  padding: .2rem .4rem;
}
  
/*Opacity*/
.opacity-1 {opacity: 0.1;}
.opacity-2 {opacity: 0.2;}
.opacity-3 {opacity: 0.3;}
.opacity-4 {opacity: 0.4;}
.opacity-5 {opacity: 0.5;}
.opacity-6 {opacity: 0.6;}
.opacity-7 {opacity: 0.7;}
.opacity-8 {opacity: 0.8;}
.opacity-9 {opacity: 0.9;}

.hide {
  display: none !important; 
}
  
/*hidden*/
@media (max-width: 575px) {
  .hidden-xs-down {
	display: none !important; 
  } 
}
	
@media (min-width: 576px) {
  .hidden-sm-up {
	display: none !important; 
  } 
}
	
@media (max-width: 767px) {
  .hidden-sm-down {
	display: none !important; 
  } 
}
	
@media (min-width: 768px) {
  .hidden-md-up {
	display: none !important; 
  } 
}
	
@media (max-width: 991px) {
  .hidden-md-down {
	display: none !important; 
  } 
}
	
@media (min-width: 992px) {
  .hidden-lg-up {
	display: none !important; 
  } 
}
	
@media (max-width: 991px) {
  .hidden-lg-down {
	display: none !important; 
  } 
}
	
@media (min-width: 1200px) {
  .hidden-xl-up {
	display: none !important; 
  } 
}

@media (max-width: 1199px) {
  .hidden-xl-down {
	display: none !important; 
  } 
}
	
@media (min-width: 1400px) {
  .hidden-xxl-up {
	display: none !important; 
  } 
}

@media (max-width: 1399px) {
  .hidden-xxl-down {
	display: none !important; 
  } 
}

/*box*/
.small-box {
  position: relative;
  display: block;
  margin-bottom: 1.5rem;
  box-shadow: 0px 2px 5px 0px rgba(19, 23, 38, 0.05);
  border-radius: 10px; }
  .small-box > .inner {
	padding: 1.25rem; }
  .small-box > .small-box-footer {
	position: relative;
	text-align: right;
	padding: 3px 10px;
	color: #ffffff;
	color: rgba(255, 255, 255, 0.8);
	display: block;
	z-index: 10;
	background: rgba(0, 0, 0, 0.1);
	text-decoration: none; }
	.small-box > .small-box-footer:hover {
	  color: #ffffff;
	  background: rgba(0, 0, 0, 0.15); }
  .small-box h3 {
	font-size: 2.7142857143rem;
	font-weight: 700;
	margin: 0 0 10px;
	white-space: nowrap;
	padding: 0;
	z-index: 5; }
  .small-box p {
	font-size: 1rem;
	margin-bottom: 10px;
	z-index: 5; }
	.small-box p > small {
	  display: block;
	  color: #f3f6f9;
	  font-size: 0.8571rem;
	  margin-top: 5px; }
  .small-box .icon {
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 0;
	font-size: 5.1428571429rem;
	color: rgba(0, 0, 0, 0.15); }
  .small-box:hover {
	text-decoration: none;
	color: #f3f6f9; }
	.small-box:hover .icon {
	  font-size: 5.5714285714rem; }

@media (max-width: 767px) {
  .small-box {
	text-align: center; }
	.small-box .icon {
	  display: none; }
	.small-box p {
	  font-size: 0.8571rem; } }
.box {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0px;
  -webkit-transition: .5s;
  transition: .5s;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
  box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05); }
  .box.collapsed-box .box-body {
	display: none; }
  .box.collapsed-box .box-footer {
	display: none; }
  .box .flex-column > li {
	border-bottom: 1px solid #f3f6f9;
	margin: 0; }
	.box .flex-column > li:last-of-type {
	  border-bottom: none; }
  .box.height-control .box-body {
	max-height: 300px;
	overflow: auto; }
  .box .border-right {
	border-right: 1px solid #f3f6f9; }
  .box .border-left {
	border-left: 1px solid #f3f6f9; }
  .box.box-solid {
	border-top: 0;
	overflow: hidden; }
	.box.box-solid.box-default > .box-header {
	  color: #172b4c;
	  background-color: #f3f6f9; }
	  .box.box-solid.box-default > .box-header .btn {
		color: #172b4c; }
	  .box.box-solid.box-default > .box-header a {
		color: #172b4c; }
	  .box.box-solid.box-default > .box-header > .box-tools .btn {
		border: 0;
		box-shadow: none; }
	.box.box-solid[class*=bg] > .box-header {
	  color: #ffffff; }
	  .box.box-solid[class*=bg] > .box-header .box-title {
		color: #ffffff; }
  .box .box-group > .box {
	margin-bottom: 5px; }
  .box .knob-label {
	text-align: center;
	color: #172b4c;
	font-weight: 300;
	font-size: 0.8571rem;
	margin-bottom: .3em; }
  .box > .loading-img, .box > .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; }
  .box .overlay {
	z-index: 50;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 10px; }
	.box .overlay > .fa {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  margin-left: -15px;
	  margin-top: -15px;
	  color: #000000;
	  font-size: 2.143rem; }
  .box .overlay.dark {
	background: rgba(0, 0, 0, 0.5); }
  .box .box-header .box-subtitle {
	font-weight: 300;
	margin-bottom: 0px;
	margin-top: 5px;
	color: #608acf; }
  .box .box-subtitle {
	font-weight: 300;
	margin-bottom: 0px;
	margin-top: 5px;
	color: #608acf; }

.pull-up {
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  -moz-transition: all .25s ease;
  transition: all .25s ease; }
  .pull-up:hover {
	-webkit-transform: translateY(-4px) scale(1.02);
	-moz-transform: translateY(-4px) scale(1.02);
	-ms-transform: translateY(-4px) scale(1.02);
	-o-transform: translateY(-4px) scale(1.02);
	transform: translateY(-4px) scale(1.02);
	-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
	box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
	z-index: 999; }

.box-inverse {
  color: #ffffff !important;
  background-color: #172b4c; }
  .box-inverse .box-header {
	color: #ffffff !important; }
  .box-inverse .box-title {
	color: #ffffff !important; }
  .box-inverse h1, .box-inverse h2, .box-inverse h3, .box-inverse h4, .box-inverse h5, .box-inverse h6 {
	color: rgba(255, 255, 255, 0.8) !important; }
  .box-inverse small {
	color: rgba(255, 255, 255, 0.8) !important; }
  .box-inverse .box-controls li > a {
	color: rgba(255, 255, 255, 0.8) !important; }
  .box-inverse .box-title small {
	opacity: 0.8; }
  .box-inverse .box-btn-more:before, .box-inverse .box-btn-more:after {
	border-color: #ffffff; }
  .box-inverse .box-header {
	border-color: rgba(255, 255, 255, 0.15); }
  .box-inverse .box-footer {
	border-color: rgba(255, 255, 255, 0.15); }
  .box-inverse .box-action {
	border-color: rgba(255, 255, 255, 0.15); }

.box-secondary {
  background-color: #4d7bc9 !important; }
  .box-secondary .box-bordered {
	border-color: #e9eff8 !important; }

.box-outline-secondary {
  background-color: #ffffff;
  border: 1px solid #4d7bc9; }

.box-bordered {
  border: 1px solid #a6a6a6; }

.box-shadowed {
  -webkit-box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08); }
  .box-shadowed:hover {
	-webkit-box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08);
	-moz-box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.08); }

.box-transparent {
  background-color: transparent; }

.box-round {
  border-radius: 10px; }

.box-header {
  color: #172b4c;
  display: block;
  padding: 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(72, 94, 144, 0.16);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }
  .box-header.without-border {
	border-bottom: none; }
  .box-header.with-border {
	border-bottom-width: 1px;
	border-bottom-style: solid; }
  .box-header .box-title {
	display: inline-block;
	margin: 0;
	font-weight: 400; }
  .box-header > i {
	display: inline-block;
	margin: 0 5px 0 0;
	font-weight: 500; }
  .box-header > .box-tools {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem; }
	.box-header > .box-tools [data-toggle=tooltip] {
	  position: relative; }
	.box-header > .box-tools .dropdown-menu > li > a {
	  color: #172b4c; }
  .box-header > .box-controls {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem; }
  .box-header img {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px; }

.box-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding: 1.5rem;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px; }
  .box-footer > *:last-child {
	margin-bottom: 0; }
  .box-footer img {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px; }

.box-controls {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  flex-direction: row-reverse; }
  .box-controls li > a {
	font-family: themify;
	font-size: 0.8571rem;
	display: inline-block;
	padding: 0 4px;
	margin: 0 4px;
	color: #608acf;
	opacity: .8;
	-webkit-transition: 0.3s linear;
	transition: 0.3s linear; }
	.box-controls li > a i {
	  font-family: themify;
	  font-size: 0.8571rem;
	  display: inline-block;
	  padding: 0 4px;
	  margin: 0 4px;
	  color: #608acf;
	  opacity: .8;
	  -webkit-transition: 0.3s linear;
	  transition: 0.3s linear; }
  .box-controls li > button {
	font-size: 0.8571rem;
	display: inline-block;
	padding: 0 4px;
	margin: 0 4px;
	color: #608acf;
	opacity: .8;
	-webkit-transition: 0.3s linear;
	transition: 0.3s linear; }
	.box-controls li > button > i {
	  font-family: themify; }
  .box-controls li:first-child > a {
	margin-right: 0; }

.box-btn-reload::before {
  content: "\e619"; }

.box-btn-close::before {
  content: "\e646"; }

.box-btn-slide::before {
  content: "\e648"; }

.box-btn-maximize::before {
  content: "\e6e8"; }

.box-btn-fullscreen::before {
  content: "\e659"; }

.box-btn-prev::before {
  content: "\e64a"; }

.box-btn-next::before {
  content: "\e649"; }

.control {
  position: relative; }

.box-body {
  padding: 1.5rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border-radius: 10px; }
  .box-body .box-title {
	display: inline-block;
	margin: 0;
	margin-bottom: 1rem;
	color: #172b4c; }
  .box-body > .table {
	margin-bottom: 0; }
  .box-body .fc {
	margin-top: 0px; }
  .box-body .full-width-chart {
	margin: -10px; }
  .box-body.no-padding .full-width-chart {
	margin: -9px; }
  .box-body .box-pane {
	border-radius: 0 0 0 10px; }
  .box-body .box-pane-right {
	border-radius: 0 0 10px; }
  .box-body > *:last-child {
	margin-bottom: 0; }
  .box-body ul li {
	line-height: 24px; }

.box-title {
  z-index: auto; }
  .box-title.box-title-bold {
	font-weight: 900; }
  .box-title code {
	font-size: 0.7143rem; }

.overlay-wrapper > .loading-img, .overlay-wrapper > .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
.overlay-wrapper .overlay {
  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px; }
  .overlay-wrapper .overlay > .fa {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	margin-top: -15px;
	color: #000000;
	font-size: 2.143rem; }
.overlay-wrapper .overlay.dark {
  background: rgba(0, 0, 0, 0.5); }

.collapsed-box .box-header.with-border {
  border-bottom: none; }

.no-header .box-body {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px; }

.box-carousel .box-footer .carousel-indicators-outside {
  padding: 6px 0; }

.box-img, .box-img-top, .box-img-bottom {
  border-radius: 0; }

.box-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  -webkit-transition: .5s;
  transition: .5s; }
  .box-loading .reveal {
	opacity: 1;
	z-index: auto; }

.box-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
  z-index: 9999 !important; }

.box-slided-up .box-content {
  display: none; }
.box-slided-up .box-body {
  display: none; }
.box-slided-up .box-btn-slide::before {
  content: "\e64b"; }

.box-header-actions {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: -4px; }
  .box-header-actions > * {
	margin: 4px; }

.box-solid .box-body {
  background-color: #ffffff !important;
  color: #737373; }
.box-solid .box-controls li a {
  color: #ffffff; }
.box-solid .box-controls .dropdown-item {
  color: #172b4c; }

.rotate-45 {
  display: inline-block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); 
}

.rotate-90 {
  display: inline-block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); 
}

.rotate-180 {
  display: inline-block;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); 
}