--- /dev/null
+
+.document-slider-dialog .modal-body {
+ padding: 0px;
+}
+
+.roo-document-slider-header {
+ background-color: $black-opacity-50;
+}
+
+.roo-document-slider-header .roo-document-slider-header-title {
+ width: 80%;
+ margin: 0 auto;
+ padding: 10px 0;
+ color: $body-bg;
+ font-weight: bold;
+ text-align: center;
+}
+
+.roo-document-slider-body {
+ background-color: $body-bg;
+ width: 100%;
+ height: 450px;
+ position: relative;
+ overflow: hidden;
+}
+
+.roo-document-slider-body .roo-document-slider-thumb {
+ position: absolute;
+ width: 80%;
+ height: 100%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ box-sizing: border-box;
+ border: 1px solid rgb(102, 102, 102);
+ box-shadow: 0 0 0 1000px $black-opacity-50;
+ text-align: center;
+ vertical-align: middle;
+ overflow: auto;
+ cursor:move;
+}
+
+.roo-document-slider-body .roo-document-slider-image{
+ width: 100%;
+}
+
+.roo-document-slider-prev {
+ position: absolute;
+ top: 0;
+ left: 0;
+ text-align: center;
+ width: 10%;
+ height: 100%;
+}
+
+.roo-document-slider-next {
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: center;
+ width: 10%;
+ height: 100%;
+}
+
+.roo-document-slider-prev > i,
+.roo-document-slider-next > i {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+ font-size: 2em;
+}
+