├── README.md ├── app.py ├── img ├── MNIST.png ├── demo.gif ├── loss.png └── model.png ├── main.py ├── mnist └── __init__.py ├── model ├── __init__.py ├── layers.py ├── loss.py └── network.py ├── preprocessing.py ├── pretrained_weights.pkl ├── static ├── css │ ├── .Rhistory │ ├── drawingboard.min.css │ └── style.min.css └── js │ ├── drawingBoard.min.js │ └── hermiteResize.js └── templates └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Handwritten Digit Recognition Using Convolutional Neural Network 2 | 3 | 4 | 5 | This repo builds a convolutional neural network based on [LENET](http://yann.lecun.com/exdb/lenet/) from scratch to recognize the MNIST Database of handwritten digits. 6 | 7 | 8 | 9 | ## Getting Started 10 | 11 | This example is only based on the python library ```numpy``` to implement convolutional layers, maxpooling layers and fully-connected layers, also including backpropagation and gradients descent to train the network and cross entropy to evaluate the loss. 12 | 13 | ## Running the Codes 14 | 15 | ```python main.py``` 16 | 17 | In the ```main.py```, you can modify the learning rate, epoch and batch size to train the CNN from scratch and evaluate the result. Besides, there is a provided pretrained weight file ```pretrained_weights.pkl```. 18 | 19 | ``` 20 | Loadind data...... 21 | Preparing data...... 22 | Training Lenet...... 23 | === Epoch: 0/1 === Iter:32 === Loss: 2.33 === BAcc: 0.09 === TAcc: 0.09 === Remain: 2 Hrs 32 Mins 35 Secs === 24 | === Epoch: 0/1 === Iter:64 === Loss: 2.32 === BAcc: 0.06 === TAcc: 0.08 === Remain: 2 Hrs 32 Mins 37 Secs === 25 | === Epoch: 0/1 === Iter:96 === Loss: 2.29 === BAcc: 0.06 === TAcc: 0.07 === Remain: 2 Hrs 31 Mins 49 Secs === 26 | === Epoch: 0/1 === Iter:128 === Loss: 2.28 === BAcc: 0.12 === TAcc: 0.09 === Remain: 2 Hrs 35 Mins 49 Secs === 27 | === Epoch: 0/1 === Iter:160 === Loss: 2.34 === BAcc: 0.03 === TAcc: 0.07 === Remain: 2 Hrs 31 Mins 48 Secs === 28 | === Epoch: 0/1 === Iter:192 === Loss: 2.33 === BAcc: 0.09 === TAcc: 0.08 === Remain: 2 Hrs 31 Mins 14 Secs === 29 | === Epoch: 0/1 === Iter:224 === Loss: 2.29 === BAcc: 0.16 === TAcc: 0.09 === Remain: 2 Hrs 32 Mins 3 Secs === 30 | === Epoch: 0/1 === Iter:256 === Loss: 2.30 === BAcc: 0.16 === TAcc: 0.10 === Remain: 2 Hrs 31 Mins 47 Secs === 31 | === Epoch: 0/1 === Iter:288 === Loss: 2.32 === BAcc: 0.09 === TAcc: 0.10 === Remain: 2 Hrs 31 Mins 58 Secs === 32 | ... 33 | ``` 34 | 35 | ```python app.py``` 36 | 37 | This is the demo to predict handwritten digits based on the python api ```flask``` to build a localhost website. 38 | 39 | ![Alt Text](img/demo.gif) 40 | 41 | ## Results 42 | 43 | * learning rate: 0.01 44 | * batch size: 100 45 | * training accuracy: 0.94 46 | * loss 47 | 48 | 49 | ## Blog Post 50 | https://medium.com/deep-learning-g/build-lenet-from-scratch-7bd0c67a151e 51 | -------------------------------------------------------------------------------- /app.py: -------------------------------------------------------------------------------- 1 | from model.network import Net 2 | from flask import Flask, jsonify, render_template, request 3 | from preprocessing import * 4 | 5 | app = Flask(__name__) 6 | @app.route('/') 7 | def index(): 8 | return render_template('index.html') 9 | @app.route('/digit_prediction', methods=['POST']) 10 | 11 | def digit_prediction(): 12 | if(request.method == "POST"): 13 | img = request.get_json() 14 | img = preprocess(img) 15 | net = Net() 16 | digit, probability = net.predict_with_pretrained_weights(img, 'pretrained_weights.pkl') 17 | data = { "digit":digit, "probability":float(int(probability*100))/100. } 18 | return jsonify(data) 19 | 20 | if __name__ == "__main__": 21 | app.run(debug=True) 22 | -------------------------------------------------------------------------------- /img/MNIST.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/img/MNIST.png -------------------------------------------------------------------------------- /img/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/img/demo.gif -------------------------------------------------------------------------------- /img/loss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/img/loss.png -------------------------------------------------------------------------------- /img/model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/img/model.png -------------------------------------------------------------------------------- /main.py: -------------------------------------------------------------------------------- 1 | import numpy as np 2 | import mnist 3 | from model.network import Net 4 | 5 | print('Loadind data......') 6 | num_classes = 10 7 | train_images = mnist.train_images() #[60000, 28, 28] 8 | train_labels = mnist.train_labels() 9 | test_images = mnist.test_images() 10 | test_labels = mnist.test_labels() 11 | 12 | print('Preparing data......') 13 | train_images -= int(np.mean(train_images)) 14 | train_images /= int(np.std(train_images)) 15 | test_images -= int(np.mean(test_images)) 16 | test_images /= int(np.std(test_images)) 17 | training_data = train_images.reshape(60000, 1, 28, 28) 18 | training_labels = np.eye(num_classes)[train_labels] 19 | testing_data = test_images.reshape(10000, 1, 28, 28) 20 | testing_labels = np.eye(num_classes)[test_labels] 21 | 22 | net = Net() 23 | print('Training Lenet......') 24 | net.train(training_data, training_labels, 32, 1, 'weights.pkl') 25 | print('Testing Lenet......') 26 | net.test(testing_data, testing_labels, 100) 27 | print('Testing with pretrained weights......') 28 | net.test_with_pretrained_weights(testing_data, testing_labels, 100, 'pretrained_weights.pkl') -------------------------------------------------------------------------------- /mnist/__init__.py: -------------------------------------------------------------------------------- 1 | import os 2 | import functools 3 | import operator 4 | import gzip 5 | import struct 6 | import array 7 | import numpy as np 8 | from urllib import urlretrieve 9 | import sys 10 | 11 | #from: https://github.com/datapythonista/mnist 12 | DATASET_DIRECTORY = 'data/' 13 | URL = 'http://yann.lecun.com/exdb/mnist/' 14 | 15 | def parse_idx(fd): 16 | DATA_TYPES = {0x08: 'B', # unsigned byte 17 | 0x09: 'b', # signed byte 18 | 0x0b: 'h', # short (2 bytes) 19 | 0x0c: 'i', # int (4 bytes) 20 | 0x0d: 'f', # float (4 bytes) 21 | 0x0e: 'd'} # double (8 bytes) 22 | 23 | header = fd.read(4) 24 | if len(header) != 4: 25 | raise IdxDecodeError('Invalid IDX file, file empty or does not contain a full header.') 26 | 27 | zeros, data_type, num_dimensions = struct.unpack('>HBB', header) 28 | 29 | if zeros != 0: 30 | raise IdxDecodeError('Invalid IDX file, file must start with two zero bytes. ' 31 | 'Found 0x%02x' % zeros) 32 | 33 | try: 34 | data_type = DATA_TYPES[data_type] 35 | except KeyError: 36 | raise IdxDecodeError('Unknown data type 0x%02x in IDX file' % data_type) 37 | 38 | dimension_sizes = struct.unpack('>' + 'I' * num_dimensions, 39 | fd.read(4 * num_dimensions)) 40 | 41 | data = array.array(data_type, fd.read()) 42 | data.byteswap() # looks like array.array reads data as little endian 43 | 44 | expected_items = functools.reduce(operator.mul, dimension_sizes) 45 | if len(data) != expected_items: 46 | raise IdxDecodeError('IDX file has wrong number of items. ' 47 | 'Expected: %d. Found: %d' % (expected_items, len(data))) 48 | 49 | return np.array(data).reshape(dimension_sizes) 50 | 51 | def print_download_progress(count, block_size, total_size): 52 | pct_complete = int(count * block_size * 100 / total_size) 53 | pct_complete = min(pct_complete, 100) 54 | msg = "\r- Download progress: %d" % (pct_complete) + "%" 55 | sys.stdout.write(msg) 56 | sys.stdout.flush() 57 | 58 | 59 | def download_and_parse_mnist_file(fname, target_dir=None, force=False): 60 | if not os.path.exists(DATASET_DIRECTORY): 61 | os.makedirs(DATASET_DIRECTORY) 62 | if not os.path.exists(DATASET_DIRECTORY+fname): 63 | print('Downloading '+fname) 64 | file_path = os.path.join(DATASET_DIRECTORY, fname) 65 | url = URL + fname 66 | file_path, _ = urlretrieve(url=url, filename=file_path, reporthook=print_download_progress) 67 | print("\nDownload finished.") 68 | 69 | fname = 'data/' + fname 70 | fopen = gzip.open if os.path.splitext(fname)[1] == '.gz' else open 71 | with fopen(fname, 'rb') as fd: 72 | return parse_idx(fd) 73 | 74 | 75 | def train_images(): 76 | return download_and_parse_mnist_file('train-images-idx3-ubyte.gz') 77 | 78 | 79 | def test_images(): 80 | return download_and_parse_mnist_file('t10k-images-idx3-ubyte.gz') 81 | 82 | 83 | def train_labels(): 84 | return download_and_parse_mnist_file('train-labels-idx1-ubyte.gz') 85 | 86 | 87 | def test_labels(): 88 | return download_and_parse_mnist_file('t10k-labels-idx1-ubyte.gz') 89 | -------------------------------------------------------------------------------- /model/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/model/__init__.py -------------------------------------------------------------------------------- /model/layers.py: -------------------------------------------------------------------------------- 1 | import numpy as np 2 | 3 | class Convolution2D: 4 | 5 | def __init__(self, inputs_channel, num_filters, kernel_size, padding, stride, learning_rate, name): 6 | # weight size: (F, C, K, K) 7 | # bias size: (F) 8 | self.F = num_filters 9 | self.K = kernel_size 10 | self.C = inputs_channel 11 | 12 | self.weights = np.zeros((self.F, self.C, self.K, self.K)) 13 | self.bias = np.zeros((self.F, 1)) 14 | for i in range(0,self.F): 15 | self.weights[i,:,:,:] = np.random.normal(loc=0, scale=np.sqrt(1./(self.C*self.K*self.K)), size=(self.C, self.K, self.K)) 16 | 17 | self.p = padding 18 | self.s = stride 19 | self.lr = learning_rate 20 | self.name = name 21 | 22 | def zero_padding(self, inputs, size): 23 | w, h = inputs.shape[0], inputs.shape[1] 24 | new_w = 2 * size + w 25 | new_h = 2 * size + h 26 | out = np.zeros((new_w, new_h)) 27 | out[size:w+size, size:h+size] = inputs 28 | return out 29 | 30 | def forward(self, inputs): 31 | # input size: (C, W, H) 32 | # output size: (N, F ,WW, HH) 33 | C = inputs.shape[0] 34 | W = inputs.shape[1]+2*self.p 35 | H = inputs.shape[2]+2*self.p 36 | self.inputs = np.zeros((C, W, H)) 37 | for c in range(inputs.shape[0]): 38 | self.inputs[c,:,:] = self.zero_padding(inputs[c,:,:], self.p) 39 | WW = (W - self.K)/self.s + 1 40 | HH = (H - self.K)/self.s + 1 41 | feature_maps = np.zeros((self.F, WW, HH)) 42 | for f in range(self.F): 43 | for w in range(0, WW, self.s): 44 | for h in range(0, HH, self.s): 45 | feature_maps[f,w,h]=np.sum(self.inputs[:,w:w+self.K,h:h+self.K]*self.weights[f,:,:,:])+self.bias[f] 46 | 47 | return feature_maps 48 | 49 | def backward(self, dy): 50 | 51 | C, W, H = self.inputs.shape 52 | dx = np.zeros(self.inputs.shape) 53 | dw = np.zeros(self.weights.shape) 54 | db = np.zeros(self.bias.shape) 55 | 56 | F, W, H = dy.shape 57 | for f in range(F): 58 | for w in range(0, W, self.s): 59 | for h in range(0, H, self.s): 60 | dw[f,:,:,:]+=dy[f,w,h]*self.inputs[:,w:w+self.K,h:h+self.K] 61 | dx[:,w:w+self.K,h:h+self.K]+=dy[f,w,h]*self.weights[f,:,:,:] 62 | 63 | for f in range(F): 64 | db[f] = np.sum(dy[f, :, :]) 65 | 66 | self.weights -= self.lr * dw 67 | self.bias -= self.lr * db 68 | return dx 69 | 70 | def extract(self): 71 | return {self.name+'.weights':self.weights, self.name+'.bias':self.bias} 72 | 73 | def feed(self, weights, bias): 74 | self.weights = weights 75 | self.bias = bias 76 | 77 | class Maxpooling2D: 78 | 79 | def __init__(self, pool_size, stride, name): 80 | self.pool = pool_size 81 | self.s = stride 82 | self.name = name 83 | 84 | def forward(self, inputs): 85 | self.inputs = inputs 86 | C, W, H = inputs.shape 87 | new_width = (W - self.pool)/self.s + 1 88 | new_height = (H - self.pool)/self.s + 1 89 | out = np.zeros((C, new_width, new_height)) 90 | for c in range(C): 91 | for w in range(W/self.s): 92 | for h in range(H/self.s): 93 | out[c, w, h] = np.max(self.inputs[c, w*self.s:w*self.s+self.pool, h*self.s:h*self.s+self.pool]) 94 | return out 95 | 96 | def backward(self, dy): 97 | C, W, H = self.inputs.shape 98 | dx = np.zeros(self.inputs.shape) 99 | 100 | for c in range(C): 101 | for w in range(0, W, self.pool): 102 | for h in range(0, H, self.pool): 103 | st = np.argmax(self.inputs[c,w:w+self.pool,h:h+self.pool]) 104 | (idx, idy) = np.unravel_index(st, (self.pool, self.pool)) 105 | dx[c, w+idx, h+idy] = dy[c, w/self.pool, h/self.pool] 106 | return dx 107 | 108 | def extract(self): 109 | return 110 | 111 | class FullyConnected: 112 | 113 | def __init__(self, num_inputs, num_outputs, learning_rate, name): 114 | self.weights = 0.01*np.random.rand(num_inputs, num_outputs) 115 | self.bias = np.zeros((num_outputs, 1)) 116 | self.lr = learning_rate 117 | self.name = name 118 | 119 | def forward(self, inputs): 120 | self.inputs = inputs 121 | return np.dot(self.inputs, self.weights) + self.bias.T 122 | 123 | def backward(self, dy): 124 | 125 | if dy.shape[0] == self.inputs.shape[0]: 126 | dy = dy.T 127 | dw = dy.dot(self.inputs) 128 | db = np.sum(dy, axis=1, keepdims=True) 129 | dx = np.dot(dy.T, self.weights.T) 130 | 131 | self.weights -= self.lr * dw.T 132 | self.bias -= self.lr * db 133 | 134 | return dx 135 | 136 | def extract(self): 137 | return {self.name+'.weights':self.weights, self.name+'.bias':self.bias} 138 | 139 | def feed(self, weights, bias): 140 | self.weights = weights 141 | self.bias = bias 142 | 143 | class Flatten: 144 | def __init__(self): 145 | pass 146 | def forward(self, inputs): 147 | self.C, self.W, self.H = inputs.shape 148 | return inputs.reshape(1, self.C*self.W*self.H) 149 | def backward(self, dy): 150 | return dy.reshape(self.C, self.W, self.H) 151 | def extract(self): 152 | return 153 | 154 | class ReLu: 155 | def __init__(self): 156 | pass 157 | def forward(self, inputs): 158 | self.inputs = inputs 159 | ret = inputs.copy() 160 | ret[ret < 0] = 0 161 | return ret 162 | def backward(self, dy): 163 | dx = dy.copy() 164 | dx[self.inputs < 0] = 0 165 | return dx 166 | def extract(self): 167 | return 168 | 169 | class Softmax: 170 | def __init__(self): 171 | pass 172 | def forward(self, inputs): 173 | exp = np.exp(inputs, dtype=np.float) 174 | self.out = exp/np.sum(exp) 175 | return self.out 176 | def backward(self, dy): 177 | return self.out.T - dy.reshape(dy.shape[0],1) 178 | def extract(self): 179 | return 180 | 181 | -------------------------------------------------------------------------------- /model/loss.py: -------------------------------------------------------------------------------- 1 | import numpy as np 2 | 3 | # loss 4 | def cross_entropy(inputs, labels): 5 | 6 | out_num = labels.shape[0] 7 | p = np.sum(labels.reshape(1,out_num)*inputs) 8 | loss = -np.log(p) 9 | return loss -------------------------------------------------------------------------------- /model/network.py: -------------------------------------------------------------------------------- 1 | import numpy as np 2 | import pickle 3 | import sys 4 | from time import * 5 | from model.loss import * 6 | from model.layers import * 7 | 8 | class Net: 9 | def __init__(self): 10 | # Lenet 11 | # input: 28x28 12 | # conv1: (5x5x6)@s1p2 -> 28x28x6 {(28-5+2x2)/1+1} 13 | # maxpool2: (2x2)@s2 -> 14x14x6 {(28-2)/2+1} 14 | # conv3: (5x5x16)@s1p0 -> 10x10x16 {(14-5)/1+1} 15 | # maxpool4: (2x2)@s2 -> 5x5x16 {(10-2)/2+1} 16 | # conv5: (5x5x120)@s1p0 -> 1x1x120 {(5-5)/1+1} 17 | # fc6: 120 -> 84 18 | # fc7: 84 -> 10 19 | # softmax: 10 -> 10 20 | lr = 0.01 21 | self.layers = [] 22 | self.layers.append(Convolution2D(inputs_channel=1, num_filters=6, kernel_size=5, padding=2, stride=1, learning_rate=lr, name='conv1')) 23 | self.layers.append(ReLu()) 24 | self.layers.append(Maxpooling2D(pool_size=2, stride=2, name='maxpool2')) 25 | self.layers.append(Convolution2D(inputs_channel=6, num_filters=16, kernel_size=5, padding=0, stride=1, learning_rate=lr, name='conv3')) 26 | self.layers.append(ReLu()) 27 | self.layers.append(Maxpooling2D(pool_size=2, stride=2, name='maxpool4')) 28 | self.layers.append(Convolution2D(inputs_channel=16, num_filters=120, kernel_size=5, padding=0, stride=1, learning_rate=lr, name='conv5')) 29 | self.layers.append(ReLu()) 30 | self.layers.append(Flatten()) 31 | self.layers.append(FullyConnected(num_inputs=120, num_outputs=84, learning_rate=lr, name='fc6')) 32 | self.layers.append(ReLu()) 33 | self.layers.append(FullyConnected(num_inputs=84, num_outputs=10, learning_rate=lr, name='fc7')) 34 | self.layers.append(Softmax()) 35 | self.lay_num = len(self.layers) 36 | 37 | def train(self, training_data, training_label, batch_size, epoch, weights_file): 38 | total_acc = 0 39 | for e in range(epoch): 40 | for batch_index in range(0, training_data.shape[0], batch_size): 41 | # batch input 42 | if batch_index + batch_size < training_data.shape[0]: 43 | data = training_data[batch_index:batch_index+batch_size] 44 | label = training_label[batch_index:batch_index + batch_size] 45 | else: 46 | data = training_data[batch_index:training_data.shape[0]] 47 | label = training_label[batch_index:training_label.shape[0]] 48 | loss = 0 49 | acc = 0 50 | start_time = time() 51 | for b in range(batch_size): 52 | x = data[b] 53 | y = label[b] 54 | # forward pass 55 | for l in range(self.lay_num): 56 | output = self.layers[l].forward(x) 57 | x = output 58 | loss += cross_entropy(output, y) 59 | if np.argmax(output) == np.argmax(y): 60 | acc += 1 61 | total_acc += 1 62 | # backward pass 63 | dy = y 64 | for l in range(self.lay_num-1, -1, -1): 65 | dout = self.layers[l].backward(dy) 66 | dy = dout 67 | # time 68 | end_time = time() 69 | batch_time = end_time-start_time 70 | remain_time = (training_data.shape[0]*epoch-batch_index-training_data.shape[0]*e)/batch_size*batch_time 71 | hrs = int(remain_time)/3600 72 | mins = int((remain_time/60-hrs*60)) 73 | secs = int(remain_time-mins*60-hrs*3600) 74 | # result 75 | loss /= batch_size 76 | batch_acc = float(acc)/float(batch_size) 77 | training_acc = float(total_acc)/float((batch_index+batch_size)*(e+1)) 78 | print('=== Epoch: {0:d}/{1:d} === Iter:{2:d} === Loss: {3:.2f} === BAcc: {4:.2f} === TAcc: {5:.2f} === Remain: {6:d} Hrs {7:d} Mins {8:d} Secs ==='.format(e,epoch,batch_index+batch_size,loss,batch_acc,training_acc,int(hrs),int(mins),int(secs))) 79 | # dump weights and bias 80 | obj = [] 81 | for i in range(self.lay_num): 82 | cache = self.layers[i].extract() 83 | obj.append(cache) 84 | with open(weights_file, 'wb') as handle: 85 | pickle.dump(obj, handle, protocol=pickle.HIGHEST_PROTOCOL) 86 | 87 | 88 | def test(self, data, label, test_size): 89 | toolbar_width = 40 90 | sys.stdout.write("[%s]" % (" " * (toolbar_width-1))) 91 | sys.stdout.flush() 92 | sys.stdout.write("\b" * (toolbar_width)) 93 | step = float(test_size)/float(toolbar_width) 94 | st = 1 95 | total_acc = 0 96 | for i in range(test_size): 97 | if i == round(step): 98 | step += float(test_size)/float(toolbar_width) 99 | st += 1 100 | sys.stdout.write(".") 101 | #sys.stdout.write("%s]a"%(" "*(toolbar_width-st))) 102 | #sys.stdout.write("\b" * (toolbar_width-st+2)) 103 | sys.stdout.flush() 104 | x = data[i] 105 | y = label[i] 106 | for l in range(self.lay_num): 107 | output = self.layers[l].forward(x) 108 | x = output 109 | if np.argmax(output) == np.argmax(y): 110 | total_acc += 1 111 | sys.stdout.write("\n") 112 | print('=== Test Size:{0:d} === Test Acc:{1:.2f} ==='.format(test_size, float(total_acc)/float(test_size))) 113 | 114 | 115 | def test_with_pretrained_weights(self, data, label, test_size, weights_file): 116 | with open(weights_file, 'rb') as handle: 117 | b = pickle.load(handle) 118 | self.layers[0].feed(b[0]['conv1.weights'], b[0]['conv1.bias']) 119 | self.layers[3].feed(b[3]['conv3.weights'], b[3]['conv3.bias']) 120 | self.layers[6].feed(b[6]['conv5.weights'], b[6]['conv5.bias']) 121 | self.layers[9].feed(b[9]['fc6.weights'], b[9]['fc6.bias']) 122 | self.layers[11].feed(b[11]['fc7.weights'], b[11]['fc7.bias']) 123 | toolbar_width = 40 124 | sys.stdout.write("[%s]" % (" " * (toolbar_width-1))) 125 | sys.stdout.flush() 126 | sys.stdout.write("\b" * (toolbar_width)) 127 | step = float(test_size)/float(toolbar_width) 128 | st = 1 129 | total_acc = 0 130 | for i in range(test_size): 131 | if i == round(step): 132 | step += float(test_size)/float(toolbar_width) 133 | st += 1 134 | sys.stdout.write(".") 135 | #sys.stdout.write("%s]a"%(" "*(toolbar_width-st))) 136 | #sys.stdout.write("\b" * (toolbar_width-st+2)) 137 | sys.stdout.flush() 138 | x = data[i] 139 | y = label[i] 140 | for l in range(self.lay_num): 141 | output = self.layers[l].forward(x) 142 | x = output 143 | if np.argmax(output) == np.argmax(y): 144 | total_acc += 1 145 | sys.stdout.write("\n") 146 | print('=== Test Size:{0:d} === Test Acc:{1:.2f} ==='.format(test_size, float(total_acc)/float(test_size))) 147 | 148 | def predict_with_pretrained_weights(self, inputs, weights_file): 149 | with open(weights_file, 'rb') as handle: 150 | b = pickle.load(handle) 151 | self.layers[0].feed(b[0]['conv1.weights'], b[0]['conv1.bias']) 152 | self.layers[3].feed(b[3]['conv3.weights'], b[3]['conv3.bias']) 153 | self.layers[6].feed(b[6]['conv5.weights'], b[6]['conv5.bias']) 154 | self.layers[9].feed(b[9]['fc6.weights'], b[9]['fc6.bias']) 155 | self.layers[11].feed(b[11]['fc7.weights'], b[11]['fc7.bias']) 156 | for l in range(self.lay_num): 157 | output = self.layers[l].forward(inputs) 158 | inputs = output 159 | digit = np.argmax(output) 160 | probability = output[0, digit] 161 | return digit, probability 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /preprocessing.py: -------------------------------------------------------------------------------- 1 | #https://github.com/zishansami102/CNN-from-Scratch/blob/master/preprocessing.py 2 | import numpy as np 3 | import cv2 4 | from scipy import ndimage 5 | import math 6 | 7 | 8 | def shift(img,sx,sy): 9 | rows,cols = img.shape 10 | M = np.float32([[1,0,sx],[0,1,sy]]) 11 | shifted = cv2.warpAffine(img,M,(cols,rows)) 12 | return shifted 13 | 14 | def getBestShift(img): 15 | cy,cx = ndimage.measurements.center_of_mass(img) 16 | 17 | rows,cols = img.shape 18 | shiftx = np.round(cols/2.0-cx).astype(int) 19 | shifty = np.round(rows/2.0-cy).astype(int) 20 | 21 | return shiftx,shifty 22 | 23 | def preprocess(img): 24 | img=255-np.array(img).reshape(28,28).astype(np.uint8) 25 | (thresh, gray) = cv2.threshold(img, 128, 255, cv2.THRESH_BINARY | cv2.THRESH_OTSU) 26 | 27 | while np.sum(gray[0]) == 0: 28 | gray = gray[1:] 29 | 30 | while np.sum(gray[:,0]) == 0: 31 | gray = np.delete(gray,0,1) 32 | 33 | while np.sum(gray[-1]) == 0: 34 | gray = gray[:-1] 35 | 36 | while np.sum(gray[:,-1]) == 0: 37 | gray = np.delete(gray,-1,1) 38 | 39 | rows,cols = gray.shape 40 | 41 | if rows > cols: 42 | factor = 20.0/rows 43 | rows = 20 44 | cols = int(round(cols*factor)) 45 | gray = cv2.resize(gray, (cols,rows)) 46 | else: 47 | factor = 20.0/cols 48 | cols = 20 49 | rows = int(round(rows*factor)) 50 | gray = cv2.resize(gray, (cols, rows)) 51 | 52 | colsPadding = (int(math.ceil((28-cols)/2.0)),int(math.floor((28-cols)/2.0))) 53 | rowsPadding = (int(math.ceil((28-rows)/2.0)),int(math.floor((28-rows)/2.0))) 54 | gray = np.lib.pad(gray,(rowsPadding,colsPadding),'constant') 55 | 56 | shiftx,shifty = getBestShift(gray) 57 | shifted = shift(gray,shiftx,shifty) 58 | gray = shifted 59 | 60 | img = gray.reshape(1,28,28).astype(np.float32) 61 | 62 | img-= int(33.3952) 63 | img/= int(78.6662) 64 | return img -------------------------------------------------------------------------------- /pretrained_weights.pkl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/pretrained_weights.pkl -------------------------------------------------------------------------------- /static/css/.Rhistory: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chih-chun-chang/convolutional-neural-network-from-scratch-python/1a4d34cb7c2e2c7e9a92a304dcbb3b5fdb62b66e/static/css/.Rhistory -------------------------------------------------------------------------------- /static/css/drawingboard.min.css: -------------------------------------------------------------------------------- 1 | /* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js 2 | * Copyright (c) 2015 Emmanuel Pelletier 3 | * Licensed MIT */ 4 | 5 | .drawing-board,.drawing-board * { 6 | -webkit-box-sizing:content-box; 7 | -moz-box-sizing:content-box; 8 | box-sizing:content-box 9 | } 10 | .drawing-board-controls-hidden,.drawing-board-utils-hidden { 11 | display:none!important 12 | } 13 | .drawing-board { 14 | position:relative; 15 | display:block 16 | } 17 | .drawing-board-canvas-wrapper { 18 | position:relative; 19 | margin:0; 20 | border: 1px solid #6793ce; 21 | } 22 | .drawing-board-canvas { 23 | position:relative; 24 | top:0; 25 | left:0; 26 | width:auto; 27 | height:auto; 28 | cursor:crosshair; 29 | min-height:200px; 30 | min-width:200px; 31 | z-index:20; 32 | } 33 | #default-board{ 34 | width:200px; 35 | height:200px; 36 | margin-left: 1%; 37 | margin-right: auto; 38 | /*float: left;*/ 39 | display: inline-block 40 | } 41 | 42 | .drawing-board-cursor { 43 | position:absolute; 44 | top:0; 45 | left:0; 46 | pointer-events:none; 47 | border-radius:50%; 48 | background:#ccc; 49 | background:rgba(0,0,0,.2); 50 | z-index:30 51 | } 52 | .drawing-board-control-colors-rainbows,.drawing-board-control-size .drawing-board-control-inner,.drawing-board-control-size-dropdown,.drawing-board-control>button { 53 | -webkit-box-sizing:border-box; 54 | -moz-box-sizing:border-box; 55 | box-sizing:border-box; 56 | overflow:hidden; 57 | background-color:#eee; 58 | padding:2px 4px; 59 | border:1px solid #ccc; 60 | box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3); 61 | -webkit-box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3); 62 | height:28px 63 | } 64 | .drawing-board-control>button { 65 | cursor:pointer; 66 | min-width:28px; 67 | line-height:14px 68 | } 69 | .drawing-board-control>button:focus,.drawing-board-control>button:hover { 70 | background-color:#ddd 71 | } 72 | .drawing-board-control>button.active,.drawing-board-control>button:active { 73 | box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.2); 74 | -webkit-box-shadow:inset 0 1px 2px 0 rgba(0,0,0,.2); 75 | background-color:#ddd 76 | } 77 | .drawing-board-control>button[disabled] { 78 | color:gray 79 | } 80 | .drawing-board-control>button[disabled].active,.drawing-board-control>button[disabled]:active,.drawing-board-control>button[disabled]:focus,.drawing-board-control>button[disabled]:hover { 81 | background-color:#eee; 82 | box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3); 83 | -webkit-box-shadow:0 1px 3px -2px #121212,inset 0 2px 5px 0 rgba(255,255,255,.3); 84 | cursor:default 85 | } 86 | .drawing-board-controls { 87 | margin:0 auto; 88 | text-align:center; 89 | font-size:0; 90 | margin-left:auto; 91 | margin-right: auto; 92 | display:table; 93 | border-spacing:9.33px 0; 94 | position:relative; 95 | min-height:28px 96 | } 97 | .drawing-board-controls[data-align=left] { 98 | margin:0; 99 | left:-9.33px 100 | } 101 | .drawing-board-controls[data-align=right] { 102 | margin:0 0 0 auto; 103 | right:-9.33px 104 | } 105 | .drawing-board-canvas-wrapper+.drawing-board-controls,.drawing-board-controls+.drawing-board-canvas-wrapper { 106 | margin-top:5px 107 | } 108 | .drawing-board-controls-hidden { 109 | height:0; 110 | min-height:0; 111 | padding:0; 112 | margin:0; 113 | border:0 114 | } 115 | .drawing-board-control { 116 | display:table-cell; 117 | border-collapse:separate; 118 | vertical-align:middle; 119 | font-size:16px; 120 | height:100% 121 | } 122 | .drawing-board-control-inner { 123 | position:relative; 124 | height:100%; 125 | -webkit-box-sizing:border-box; 126 | -moz-box-sizing:border-box; 127 | box-sizing:border-box 128 | } 129 | .drawing-board-control>button { 130 | margin:0; 131 | vertical-align:middle 132 | } 133 | .drawing-board-control-colors { 134 | font-size:0; 135 | line-height:0 136 | } 137 | .drawing-board-control-colors-current { 138 | border:1px solid #ccc; 139 | cursor:pointer; 140 | display:inline-block; 141 | width:26px; 142 | height:26px 143 | } 144 | .drawing-board-control-colors-rainbows { 145 | display:inline-block; 146 | position:absolute; 147 | left:0; 148 | top:33px; 149 | margin-left:0; 150 | z-index:100; 151 | width:250px; 152 | height:auto; 153 | padding:4px 154 | } 155 | .drawing-board-control-colors-rainbow { 156 | height:18px 157 | } 158 | .drawing-board-control-colors-picker:first-child { 159 | margin-right:5px 160 | } 161 | .drawing-board-control-colors-picker { 162 | display:inline-block; 163 | width:18px; 164 | height:18px; 165 | cursor:pointer 166 | } 167 | .drawing-board-control-colors-picker[data-color="rgba(255, 255, 255, 1)"] { 168 | width:16px; 169 | height:17px; 170 | border:1px solid #ccc; 171 | border-bottom:none 172 | } 173 | .drawing-board-control-colors-picker:hover { 174 | width:16px; 175 | height:16px; 176 | border:1px solid #555 177 | } 178 | .drawing-board-control-drawingmode>button { 179 | margin-right:2px 180 | } 181 | .drawing-board-control-drawingmode>button:last-child { 182 | margin-right:0 183 | } 184 | .drawing-board-control-drawingmode-pencil-button { 185 | overflow:hidden; 186 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNpiZAACVlFRBhYREQZcQPnbNwa3N28YlL5+ZfgLFfvPwGD9m4FhIgsDHuAO0gTUDNKIBvyBmqt/MTDMY8Gl0f31azD7L6oUIxCnAzWmAPHBfwwM01AMUAV6JfPQIVwOYgVqqPnFyOjz6///O38YGKpAgmAD1OXlGdTk5PD5hgeouZudj8/uy9evP/78/dsFFPsJNiAoKIiBABAHap4oLi9v8fTNm48//v7NBwbgWZgkE7rqt8DY+A8JZRBW+cfIuEDT0NDlzadP3z98/doPFDuCrB7TAGFhBqCNIGwM9OcKUzs7+xdv3355+f79VqDYAiTDwZgJh7ONgYpnOvn4GL949erT7UePdgL5JVCD4fgBLBBxaX74+PG789evnwby0/8jKXgExIeB+CG6Af///1e9Ki9vFSAkZPzoyZPPJy9evA9MB77/sWiEARZkzV+/fvXYtGnTpG3btj28EBT0BqjZ5D8OjXCwPksUhA1Wpggf/PHjx/9169Y9EBERaUlgZmaIAcrLE4rk5sIqBqDmlefnRPzfWGX5EaSZm5ubgRloADGA5QZ3RgK7gESY4PMNn9ZtObPpzZvfU4DiYkiB/RcHG+S7fyxAMH/lFU2GOZd2bLx18/cEUMoD4j9I+DcS/RtJHGTYf4AAAwAxaOMYHjxKFwAAAABJRU5ErkJggg==); 187 | background-position:50% 50%; 188 | background-repeat:no-repeat 189 | } 190 | .drawing-board-control-drawingmode-pencil-button:before { 191 | content:""; 192 | display:block; 193 | width:0; 194 | height:100% 195 | } 196 | .drawing-board-control-drawingmode-eraser-button { 197 | overflow:hidden; 198 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkpJREFUeNp0kk+IElEcx39vFBc9+OfQRTAwzFt4CaYOKStj6MoeculStzoIQSB4kCVckmDx4iGCXWYJIqjoVOzO1l4qT1F7WfBWHvxzDPyTB3XUmXn93suRybUffHmP997n9/cRsFgwGARJkiAcDsPlwgEIeEZQAhCRAkgAlOD6SQP4rgMFDWVnYCAQgFgsBqFQCBwOByzZNQOotPHx1RNCCCipu6bfb+zSnslkeOQVILPrBkAirbws9btdTEWAzZPXpfepOzaeGMBXwe/3w3+MwTc3Dl+UeghTiskbBvR6Pbh18mZHB0jjmxvCKhIfR37s3r+Sevf8ca/T4TBF2HTSODuDxP7uNjrZFFbBk8lEzOVyspa4ykGYw2zfbTb/7ilvok1YhlVVFfP5vDydTkHXdXDdlhZOOnPY4/HA0YPtp3h6LFjh8XgsFgoFGTPgsKm1zDr8ajTQh8Fh5eGjZzjGI8yjKlgjF4tFGdd/YKYmRja24hw+zu3sYe2HiH3hYzQjl8tleTQanWtou93G6Qngdrth6+1+9h6hTULJZ/PeziJXKhV5OByeg1ut1gJOp9NZTdNOcQ419ot+ggp1qoLdBFmqVmNpm3A8Huewy+Wq1RH8QH9zmBlJJpMRdCIqiiIPBgN+2MCGsW/r8/kgGo1m0fmpzWarseayHlmNeL1eFiWC0cRqtSr3+/3FpSiKHMZtjU1glbFyfKgLTqfzEka9OJvNeDnzz1JnCaFmqOl8ZdJY1SiDOXCiXKg1NtG5DIt0y6ov3dE/AgwAENFWYYLj4mYAAAAASUVORK5CYII=); 199 | background-position:50% 50%; 200 | background-repeat:no-repeat 201 | } 202 | .drawing-board-control-drawingmode-eraser-button:before { 203 | content:""; 204 | display:block; 205 | width:0; 206 | height:100% 207 | } 208 | .drawing-board-control-drawingmode-filler-button { 209 | overflow:hidden; 210 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnNJREFUeNp0k0trE1EUx89MJpNJooYYXBgDNtCKdRPwlbqoCKUtaNVNA0Uo7UbMxoVPEARTXEi+QWfnwn6DEAlEkrSLttTGRiULEQlJ8yChmbzI++E50yTUJA78uMy953/u/557LmOz2WDEZ2m1WrckSRJSqdR2tVrdHQyYebwHtVoNuFHqTqczhQnWKaBYLDoKhcIuzgHDMKBSqeD20qd+LNdsNocSoFhRr9ctpVLJigl4xIIJQizLAmG4cAPa7bYcy9Iug5TL5UYikbD6/X7Rbre/IUcYe3WUW5ZsnQQzW9LpNOPz+UQc5aBM5mgdh7vI9FCCAesW2tnr9YqZTAby+bw8f3AQRP6853n+Ph5hemSCntjj8YjZbFYWx2IxeS2RSEMwuA87O79eqdXquVolK+GxnP0EPbHb7RZJSGABIR6PA11zJHKIR2MhHA5DIPDj7eH3j95KpfK60Wg8Yntil8slkqgnpioLghacTidoNDpEC3q9HnheCc3s1jZeLcW943pirPw/4lKpBkqlDubnl/riycnLsLy88EKj0fhzuRyZv8RFo1E6wpBYkiqy7Z54YmIcVlYeyOKC4mYwJ0nHRaQuM5vNT6hB/iceG7sIq6sPnwmC4MerDkby40AOCCoiddie1Wp92W7zQ2KTyQSLizNP8T0EsPLBbxEDnCj0GkM2qIEwyZRCobizsfH5A1ZXFhuN52F29vpz3HkL574mk8lj24Y5wsHkvjjoX0BOIWc5jruHzbK2ufmzEwpFO3jnDhQv4JoROYdoERVyGjEgZ8iBDlF3FzXo4go6utZ9lftY4N/dXisjR0i1G0ublv8KMAA0ZoUlicxrhwAAAABJRU5ErkJggg==); 211 | background-position:50% 50%; 212 | background-repeat:no-repeat 213 | } 214 | .drawing-board-control-drawingmode-filler-button:before { 215 | content:""; 216 | display:block; 217 | width:0; 218 | height:100% 219 | } 220 | .drawing-board-control-navigation>button { 221 | font-family:Helvetica,Arial,sans-serif; 222 | font-size:14px; 223 | font-weight:700; 224 | margin-right:2px 225 | } 226 | .drawing-board-control-navigation>button:last-child { 227 | margin-right:0 228 | } 229 | .drawing-board-control-size[data-drawing-board-type=range] .drawing-board-control-inner { 230 | width:75px 231 | } 232 | .drawing-board-control-size[data-drawing-board-type=dropdown] .drawing-board-control-inner { 233 | overflow:visible 234 | } 235 | .drawing-board-control-size-range-input { 236 | position:relative; 237 | width:100%; 238 | z-index:100; 239 | margin:0; 240 | padding:0; 241 | border:0 242 | } 243 | .drawing-board-control-size-dropdown span,.drawing-board-control-size-dropdown-current span,.drawing-board-control-size-range-current { 244 | display:block; 245 | background:#333; 246 | opacity:.8 247 | } 248 | .drawing-board-control-size-range-current { 249 | display:inline-block; 250 | opacity:.15; 251 | position:absolute; 252 | pointer-events:none; 253 | left:50%; 254 | top:50%; 255 | z-index:50 256 | } 257 | .drawing-board-control-size-dropdown-current { 258 | display:block; 259 | height:100%; 260 | width:40px; 261 | overflow:hidden; 262 | position:relative 263 | } 264 | .drawing-board-control-size-dropdown-current span { 265 | position:absolute; 266 | left:50%; 267 | top:50% 268 | } 269 | .drawing-board-control-size-dropdown { 270 | position:absolute; 271 | left:-6px; 272 | top:33px; 273 | height:auto; 274 | list-style-type:none; 275 | margin:0; 276 | padding:0; 277 | z-index:100 278 | } 279 | .drawing-board-control-size-dropdown li { 280 | display:block; 281 | padding:4px; 282 | margin:3px 0; 283 | min-height:16px 284 | } 285 | .drawing-board-control-size-dropdown li:hover { 286 | background:#ccc 287 | } 288 | .drawing-board-control-size-dropdown span { 289 | margin:0 auto 290 | } 291 | 292 | -------------------------------------------------------------------------------- /static/css/style.min.css: -------------------------------------------------------------------------------- 1 | @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 2 | @import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'); 3 | @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 4 | @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'); 5 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'); 6 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700)'; 7 | @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); 8 | .btn,.btn-flat,.btn-large,.waves-effect,a { 9 | -webkit-tap-highlight-color:transparent 10 | } 11 | img,legend { 12 | border:0 13 | } 14 | legend,ul { 15 | padding:0 16 | } 17 | .fade-in,ul.staggered-list li { 18 | opacity:0 19 | } 20 | .pagination li,table.centered tbody tr td,table.centered thead tr th { 21 | text-align:center 22 | } 23 | table.bordered>tbody>tr,table.bordered>thead>tr,thead { 24 | border-bottom:1px solid #d0d0d0 25 | } 26 | .clearfix,.row:after,.toast { 27 | clear:both 28 | } 29 | .tabs,.truncate,nav .brand-logo { 30 | white-space:nowrap 31 | } 32 | .picker__table,table { 33 | border-collapse:collapse; 34 | border-spacing:0 35 | } 36 | .btn,.btn-large,a { 37 | text-decoration:none 38 | } 39 | .materialize-red { 40 | background-color:#e51c23!important 41 | } 42 | .materialize-red-text { 43 | color:#e51c23!important 44 | } 45 | .materialize-red.lighten-5 { 46 | background-color:#fdeaeb!important 47 | } 48 | .materialize-red-text.text-lighten-5 { 49 | color:#fdeaeb!important 50 | } 51 | .materialize-red.lighten-4 { 52 | background-color:#f8c1c3!important 53 | } 54 | .materialize-red-text.text-lighten-4 { 55 | color:#f8c1c3!important 56 | } 57 | .materialize-red.lighten-3 { 58 | background-color:#f3989b!important 59 | } 60 | .materialize-red-text.text-lighten-3 { 61 | color:#f3989b!important 62 | } 63 | .materialize-red.lighten-2 { 64 | background-color:#ee6e73!important 65 | } 66 | .materialize-red-text.text-lighten-2 { 67 | color:#ee6e73!important 68 | } 69 | .materialize-red.lighten-1 { 70 | background-color:#ea454b!important 71 | } 72 | .materialize-red-text.text-lighten-1 { 73 | color:#ea454b!important 74 | } 75 | .materialize-red.darken-1 { 76 | background-color:#d0181e!important 77 | } 78 | .materialize-red-text.text-darken-1 { 79 | color:#d0181e!important 80 | } 81 | .materialize-red.darken-2 { 82 | background-color:#b9151b!important 83 | } 84 | .materialize-red-text.text-darken-2 { 85 | color:#b9151b!important 86 | } 87 | .materialize-red.darken-3 { 88 | background-color:#a21318!important 89 | } 90 | .materialize-red-text.text-darken-3 { 91 | color:#a21318!important 92 | } 93 | .materialize-red.darken-4 { 94 | background-color:#8b1014!important 95 | } 96 | .materialize-red-text.text-darken-4 { 97 | color:#8b1014!important 98 | } 99 | .red { 100 | background-color:#F44336!important 101 | } 102 | .red-text { 103 | color:#F44336!important 104 | } 105 | .red.lighten-5 { 106 | background-color:#FFEBEE!important 107 | } 108 | .red-text.text-lighten-5 { 109 | color:#FFEBEE!important 110 | } 111 | .red.lighten-4 { 112 | background-color:#FFCDD2!important 113 | } 114 | .red-text.text-lighten-4 { 115 | color:#FFCDD2!important 116 | } 117 | .red.lighten-3 { 118 | background-color:#EF9A9A!important 119 | } 120 | .red-text.text-lighten-3 { 121 | color:#EF9A9A!important 122 | } 123 | .red.lighten-2 { 124 | background-color:#E57373!important 125 | } 126 | .red-text.text-lighten-2 { 127 | color:#E57373!important 128 | } 129 | .red.lighten-1 { 130 | background-color:#EF5350!important 131 | } 132 | .red-text.text-lighten-1 { 133 | color:#EF5350!important 134 | } 135 | .red.darken-1 { 136 | background-color:#E53935!important 137 | } 138 | .red-text.text-darken-1 { 139 | color:#E53935!important 140 | } 141 | .red.darken-2 { 142 | background-color:#D32F2F!important 143 | } 144 | .red-text.text-darken-2 { 145 | color:#D32F2F!important 146 | } 147 | .red.darken-3 { 148 | background-color:#C62828!important 149 | } 150 | .red-text.text-darken-3 { 151 | color:#C62828!important 152 | } 153 | .red.darken-4 { 154 | background-color:#B71C1C!important 155 | } 156 | .red-text.text-darken-4 { 157 | color:#B71C1C!important 158 | } 159 | .red.accent-1 { 160 | background-color:#FF8A80!important 161 | } 162 | .red-text.text-accent-1 { 163 | color:#FF8A80!important 164 | } 165 | .red.accent-2 { 166 | background-color:#FF5252!important 167 | } 168 | .red-text.text-accent-2 { 169 | color:#FF5252!important 170 | } 171 | .red.accent-3 { 172 | background-color:#FF1744!important 173 | } 174 | .red-text.text-accent-3 { 175 | color:#FF1744!important 176 | } 177 | .red.accent-4 { 178 | background-color:#D50000!important 179 | } 180 | .red-text.text-accent-4 { 181 | color:#D50000!important 182 | } 183 | .pink { 184 | background-color:#e91e63!important 185 | } 186 | .pink-text { 187 | color:#e91e63!important 188 | } 189 | .pink.lighten-5 { 190 | background-color:#fce4ec!important 191 | } 192 | .pink-text.text-lighten-5 { 193 | color:#fce4ec!important 194 | } 195 | .pink.lighten-4 { 196 | background-color:#f8bbd0!important 197 | } 198 | .pink-text.text-lighten-4 { 199 | color:#f8bbd0!important 200 | } 201 | .pink.lighten-3 { 202 | background-color:#f48fb1!important 203 | } 204 | .pink-text.text-lighten-3 { 205 | color:#f48fb1!important 206 | } 207 | .pink.lighten-2 { 208 | background-color:#f06292!important 209 | } 210 | .pink-text.text-lighten-2 { 211 | color:#f06292!important 212 | } 213 | .pink.lighten-1 { 214 | background-color:#ec407a!important 215 | } 216 | .pink-text.text-lighten-1 { 217 | color:#ec407a!important 218 | } 219 | .pink.darken-1 { 220 | background-color:#d81b60!important 221 | } 222 | .pink-text.text-darken-1 { 223 | color:#d81b60!important 224 | } 225 | .pink.darken-2 { 226 | background-color:#c2185b!important 227 | } 228 | .pink-text.text-darken-2 { 229 | color:#c2185b!important 230 | } 231 | .pink.darken-3 { 232 | background-color:#ad1457!important 233 | } 234 | .pink-text.text-darken-3 { 235 | color:#ad1457!important 236 | } 237 | .pink.darken-4 { 238 | background-color:#880e4f!important 239 | } 240 | .pink-text.text-darken-4 { 241 | color:#880e4f!important 242 | } 243 | .pink.accent-1 { 244 | background-color:#ff80ab!important 245 | } 246 | .pink-text.text-accent-1 { 247 | color:#ff80ab!important 248 | } 249 | .pink.accent-2 { 250 | background-color:#ff4081!important 251 | } 252 | .pink-text.text-accent-2 { 253 | color:#ff4081!important 254 | } 255 | .pink.accent-3 { 256 | background-color:#f50057!important 257 | } 258 | .pink-text.text-accent-3 { 259 | color:#f50057!important 260 | } 261 | .pink.accent-4 { 262 | background-color:#c51162!important 263 | } 264 | .pink-text.text-accent-4 { 265 | color:#c51162!important 266 | } 267 | .purple { 268 | background-color:#9c27b0!important 269 | } 270 | .purple-text { 271 | color:#9c27b0!important 272 | } 273 | .purple.lighten-5 { 274 | background-color:#f3e5f5!important 275 | } 276 | .purple-text.text-lighten-5 { 277 | color:#f3e5f5!important 278 | } 279 | .purple.lighten-4 { 280 | background-color:#e1bee7!important 281 | } 282 | .purple-text.text-lighten-4 { 283 | color:#e1bee7!important 284 | } 285 | .purple.lighten-3 { 286 | background-color:#ce93d8!important 287 | } 288 | .purple-text.text-lighten-3 { 289 | color:#ce93d8!important 290 | } 291 | .purple.lighten-2 { 292 | background-color:#ba68c8!important 293 | } 294 | .purple-text.text-lighten-2 { 295 | color:#ba68c8!important 296 | } 297 | .purple.lighten-1 { 298 | background-color:#ab47bc!important 299 | } 300 | .purple-text.text-lighten-1 { 301 | color:#ab47bc!important 302 | } 303 | .purple.darken-1 { 304 | background-color:#8e24aa!important 305 | } 306 | .purple-text.text-darken-1 { 307 | color:#8e24aa!important 308 | } 309 | .purple.darken-2 { 310 | background-color:#7b1fa2!important 311 | } 312 | .purple-text.text-darken-2 { 313 | color:#7b1fa2!important 314 | } 315 | .purple.darken-3 { 316 | background-color:#6a1b9a!important 317 | } 318 | .purple-text.text-darken-3 { 319 | color:#6a1b9a!important 320 | } 321 | .purple.darken-4 { 322 | background-color:#4a148c!important 323 | } 324 | .purple-text.text-darken-4 { 325 | color:#4a148c!important 326 | } 327 | .purple.accent-1 { 328 | background-color:#ea80fc!important 329 | } 330 | .purple-text.text-accent-1 { 331 | color:#ea80fc!important 332 | } 333 | .purple.accent-2 { 334 | background-color:#e040fb!important 335 | } 336 | .purple-text.text-accent-2 { 337 | color:#e040fb!important 338 | } 339 | .purple.accent-3 { 340 | background-color:#d500f9!important 341 | } 342 | .purple-text.text-accent-3 { 343 | color:#d500f9!important 344 | } 345 | .purple.accent-4 { 346 | background-color:#a0f!important 347 | } 348 | .purple-text.text-accent-4 { 349 | color:#a0f!important 350 | } 351 | .deep-purple { 352 | background-color:#673ab7!important 353 | } 354 | .deep-purple-text { 355 | color:#673ab7!important 356 | } 357 | .deep-purple.lighten-5 { 358 | background-color:#ede7f6!important 359 | } 360 | .deep-purple-text.text-lighten-5 { 361 | color:#ede7f6!important 362 | } 363 | .deep-purple.lighten-4 { 364 | background-color:#d1c4e9!important 365 | } 366 | .deep-purple-text.text-lighten-4 { 367 | color:#d1c4e9!important 368 | } 369 | .deep-purple.lighten-3 { 370 | background-color:#b39ddb!important 371 | } 372 | .deep-purple-text.text-lighten-3 { 373 | color:#b39ddb!important 374 | } 375 | .deep-purple.lighten-2 { 376 | background-color:#9575cd!important 377 | } 378 | .deep-purple-text.text-lighten-2 { 379 | color:#9575cd!important 380 | } 381 | .deep-purple.lighten-1 { 382 | background-color:#7e57c2!important 383 | } 384 | .deep-purple-text.text-lighten-1 { 385 | color:#7e57c2!important 386 | } 387 | .deep-purple.darken-1 { 388 | background-color:#5e35b1!important 389 | } 390 | .deep-purple-text.text-darken-1 { 391 | color:#5e35b1!important 392 | } 393 | .deep-purple.darken-2 { 394 | background-color:#512da8!important 395 | } 396 | .deep-purple-text.text-darken-2 { 397 | color:#512da8!important 398 | } 399 | .deep-purple.darken-3 { 400 | background-color:#4527a0!important 401 | } 402 | .deep-purple-text.text-darken-3 { 403 | color:#4527a0!important 404 | } 405 | .deep-purple.darken-4 { 406 | background-color:#311b92!important 407 | } 408 | .deep-purple-text.text-darken-4 { 409 | color:#311b92!important 410 | } 411 | .deep-purple.accent-1 { 412 | background-color:#b388ff!important 413 | } 414 | .deep-purple-text.text-accent-1 { 415 | color:#b388ff!important 416 | } 417 | .deep-purple.accent-2 { 418 | background-color:#7c4dff!important 419 | } 420 | .deep-purple-text.text-accent-2 { 421 | color:#7c4dff!important 422 | } 423 | .deep-purple.accent-3 { 424 | background-color:#651fff!important 425 | } 426 | .deep-purple-text.text-accent-3 { 427 | color:#651fff!important 428 | } 429 | .deep-purple.accent-4 { 430 | background-color:#6200ea!important 431 | } 432 | .deep-purple-text.text-accent-4 { 433 | color:#6200ea!important 434 | } 435 | .indigo { 436 | background-color:#3f51b5!important 437 | } 438 | .indigo-text { 439 | color:#3f51b5!important 440 | } 441 | .indigo.lighten-5 { 442 | background-color:#e8eaf6!important 443 | } 444 | .indigo-text.text-lighten-5 { 445 | color:#e8eaf6!important 446 | } 447 | .indigo.lighten-4 { 448 | background-color:#c5cae9!important 449 | } 450 | .indigo-text.text-lighten-4 { 451 | color:#c5cae9!important 452 | } 453 | .indigo.lighten-3 { 454 | background-color:#9fa8da!important 455 | } 456 | .indigo-text.text-lighten-3 { 457 | color:#9fa8da!important 458 | } 459 | .indigo.lighten-2 { 460 | background-color:#7986cb!important 461 | } 462 | .indigo-text.text-lighten-2 { 463 | color:#7986cb!important 464 | } 465 | .indigo.lighten-1 { 466 | background-color:#5c6bc0!important 467 | } 468 | .indigo-text.text-lighten-1 { 469 | color:#5c6bc0!important 470 | } 471 | .indigo.darken-1 { 472 | background-color:#3949ab!important 473 | } 474 | .indigo-text.text-darken-1 { 475 | color:#3949ab!important 476 | } 477 | .indigo.darken-2 { 478 | background-color:#303f9f!important 479 | } 480 | .indigo-text.text-darken-2 { 481 | color:#303f9f!important 482 | } 483 | .indigo.darken-3 { 484 | background-color:#283593!important 485 | } 486 | .indigo-text.text-darken-3 { 487 | color:#283593!important 488 | } 489 | .indigo.darken-4 { 490 | background-color:#1a237e!important 491 | } 492 | .indigo-text.text-darken-4 { 493 | color:#1a237e!important 494 | } 495 | .indigo.accent-1 { 496 | background-color:#8c9eff!important 497 | } 498 | .indigo-text.text-accent-1 { 499 | color:#8c9eff!important 500 | } 501 | .indigo.accent-2 { 502 | background-color:#536dfe!important 503 | } 504 | .indigo-text.text-accent-2 { 505 | color:#536dfe!important 506 | } 507 | .indigo.accent-3 { 508 | background-color:#3d5afe!important 509 | } 510 | .indigo-text.text-accent-3 { 511 | color:#3d5afe!important 512 | } 513 | .indigo.accent-4 { 514 | background-color:#304ffe!important 515 | } 516 | .indigo-text.text-accent-4 { 517 | color:#304ffe!important 518 | } 519 | .blue { 520 | background-color:#2196F3!important 521 | } 522 | .blue-text { 523 | color:#2196F3!important 524 | } 525 | .blue.lighten-5 { 526 | background-color:#E3F2FD!important 527 | } 528 | .blue-text.text-lighten-5 { 529 | color:#E3F2FD!important 530 | } 531 | .blue.lighten-4 { 532 | background-color:#BBDEFB!important 533 | } 534 | .blue-text.text-lighten-4 { 535 | color:#BBDEFB!important 536 | } 537 | .blue.lighten-3 { 538 | background-color:#90CAF9!important 539 | } 540 | .blue-text.text-lighten-3 { 541 | color:#90CAF9!important 542 | } 543 | .blue.lighten-2 { 544 | background-color:#64B5F6!important 545 | } 546 | .blue-text.text-lighten-2 { 547 | color:#64B5F6!important 548 | } 549 | .blue.lighten-1 { 550 | background-color:#42A5F5!important 551 | } 552 | .blue-text.text-lighten-1 { 553 | color:#42A5F5!important 554 | } 555 | .blue.darken-1 { 556 | background-color:#1E88E5!important 557 | } 558 | .blue-text.text-darken-1 { 559 | color:#1E88E5!important 560 | } 561 | .blue.darken-2 { 562 | background-color:#1976D2!important 563 | } 564 | .blue-text.text-darken-2 { 565 | color:#1976D2!important 566 | } 567 | .blue.darken-3 { 568 | background-color:#1565C0!important 569 | } 570 | .blue-text.text-darken-3 { 571 | color:#1565C0!important 572 | } 573 | .blue.darken-4 { 574 | background-color:#0D47A1!important 575 | } 576 | .blue-text.text-darken-4 { 577 | color:#0D47A1!important 578 | } 579 | .blue.accent-1 { 580 | background-color:#82B1FF!important 581 | } 582 | .blue-text.text-accent-1 { 583 | color:#82B1FF!important 584 | } 585 | .blue.accent-2 { 586 | background-color:#448AFF!important 587 | } 588 | .blue-text.text-accent-2 { 589 | color:#448AFF!important 590 | } 591 | .blue.accent-3 { 592 | background-color:#2979FF!important 593 | } 594 | .blue-text.text-accent-3 { 595 | color:#2979FF!important 596 | } 597 | .blue.accent-4 { 598 | background-color:#2962FF!important 599 | } 600 | .blue-text.text-accent-4 { 601 | color:#2962FF!important 602 | } 603 | .light-blue { 604 | background-color:#03a9f4!important 605 | } 606 | .light-blue-text { 607 | color:#03a9f4!important 608 | } 609 | .light-blue.lighten-5 { 610 | background-color:#e1f5fe!important 611 | } 612 | .light-blue-text.text-lighten-5 { 613 | color:#e1f5fe!important 614 | } 615 | .light-blue.lighten-4 { 616 | background-color:#b3e5fc!important 617 | } 618 | .light-blue-text.text-lighten-4 { 619 | color:#b3e5fc!important 620 | } 621 | .light-blue.lighten-3 { 622 | background-color:#81d4fa!important 623 | } 624 | .light-blue-text.text-lighten-3 { 625 | color:#81d4fa!important 626 | } 627 | .light-blue.lighten-2 { 628 | background-color:#4fc3f7!important 629 | } 630 | .light-blue-text.text-lighten-2 { 631 | color:#4fc3f7!important 632 | } 633 | .light-blue.lighten-1 { 634 | background-color:#29b6f6!important 635 | } 636 | .light-blue-text.text-lighten-1 { 637 | color:#29b6f6!important 638 | } 639 | .light-blue.darken-1 { 640 | background-color:#039be5!important 641 | } 642 | .light-blue-text.text-darken-1 { 643 | color:#039be5!important 644 | } 645 | .light-blue.darken-2 { 646 | background-color:#0288d1!important 647 | } 648 | .light-blue-text.text-darken-2 { 649 | color:#0288d1!important 650 | } 651 | .light-blue.darken-3 { 652 | background-color:#0277bd!important 653 | } 654 | .light-blue-text.text-darken-3 { 655 | color:#0277bd!important 656 | } 657 | .light-blue.darken-4 { 658 | background-color:#01579b!important 659 | } 660 | .light-blue-text.text-darken-4 { 661 | color:#01579b!important 662 | } 663 | .light-blue.accent-1 { 664 | background-color:#80d8ff!important 665 | } 666 | .light-blue-text.text-accent-1 { 667 | color:#80d8ff!important 668 | } 669 | .light-blue.accent-2 { 670 | background-color:#40c4ff!important 671 | } 672 | .light-blue-text.text-accent-2 { 673 | color:#40c4ff!important 674 | } 675 | .light-blue.accent-3 { 676 | background-color:#00b0ff!important 677 | } 678 | .light-blue-text.text-accent-3 { 679 | color:#00b0ff!important 680 | } 681 | .light-blue.accent-4 { 682 | background-color:#0091ea!important 683 | } 684 | .light-blue-text.text-accent-4 { 685 | color:#0091ea!important 686 | } 687 | .cyan { 688 | background-color:#00bcd4!important 689 | } 690 | .cyan-text { 691 | color:#00bcd4!important 692 | } 693 | .cyan.lighten-5 { 694 | background-color:#e0f7fa!important 695 | } 696 | .cyan-text.text-lighten-5 { 697 | color:#e0f7fa!important 698 | } 699 | .cyan.lighten-4 { 700 | background-color:#b2ebf2!important 701 | } 702 | .cyan-text.text-lighten-4 { 703 | color:#b2ebf2!important 704 | } 705 | .cyan.lighten-3 { 706 | background-color:#80deea!important 707 | } 708 | .cyan-text.text-lighten-3 { 709 | color:#80deea!important 710 | } 711 | .cyan.lighten-2 { 712 | background-color:#4dd0e1!important 713 | } 714 | .cyan-text.text-lighten-2 { 715 | color:#4dd0e1!important 716 | } 717 | .cyan.lighten-1 { 718 | background-color:#26c6da!important 719 | } 720 | .cyan-text.text-lighten-1 { 721 | color:#26c6da!important 722 | } 723 | .cyan.darken-1 { 724 | background-color:#00acc1!important 725 | } 726 | .cyan-text.text-darken-1 { 727 | color:#00acc1!important 728 | } 729 | .cyan.darken-2 { 730 | background-color:#0097a7!important 731 | } 732 | .cyan-text.text-darken-2 { 733 | color:#0097a7!important 734 | } 735 | .cyan.darken-3 { 736 | background-color:#00838f!important 737 | } 738 | .cyan-text.text-darken-3 { 739 | color:#00838f!important 740 | } 741 | .cyan.darken-4 { 742 | background-color:#006064!important 743 | } 744 | .cyan-text.text-darken-4 { 745 | color:#006064!important 746 | } 747 | .cyan.accent-1 { 748 | background-color:#84ffff!important 749 | } 750 | .cyan-text.text-accent-1 { 751 | color:#84ffff!important 752 | } 753 | .cyan.accent-2 { 754 | background-color:#18ffff!important 755 | } 756 | .cyan-text.text-accent-2 { 757 | color:#18ffff!important 758 | } 759 | .cyan.accent-3 { 760 | background-color:#00e5ff!important 761 | } 762 | .cyan-text.text-accent-3 { 763 | color:#00e5ff!important 764 | } 765 | .cyan.accent-4 { 766 | background-color:#00b8d4!important 767 | } 768 | .cyan-text.text-accent-4 { 769 | color:#00b8d4!important 770 | } 771 | .teal { 772 | background-color:#009688!important 773 | } 774 | .teal-text { 775 | color:#009688!important 776 | } 777 | .teal.lighten-5 { 778 | background-color:#e0f2f1!important 779 | } 780 | .teal-text.text-lighten-5 { 781 | color:#e0f2f1!important 782 | } 783 | .teal.lighten-4 { 784 | background-color:#b2dfdb!important 785 | } 786 | .teal-text.text-lighten-4 { 787 | color:#b2dfdb!important 788 | } 789 | .teal.lighten-3 { 790 | background-color:#80cbc4!important 791 | } 792 | .teal-text.text-lighten-3 { 793 | color:#80cbc4!important 794 | } 795 | .teal.lighten-2 { 796 | background-color:#4db6ac!important 797 | } 798 | .teal-text.text-lighten-2 { 799 | color:#4db6ac!important 800 | } 801 | .teal.lighten-1 { 802 | background-color:#26a69a!important 803 | } 804 | .teal-text.text-lighten-1 { 805 | color:#26a69a!important 806 | } 807 | .teal.darken-1 { 808 | background-color:#00897b!important 809 | } 810 | .teal-text.text-darken-1 { 811 | color:#00897b!important 812 | } 813 | .teal.darken-2 { 814 | background-color:#00796b!important 815 | } 816 | .teal-text.text-darken-2 { 817 | color:#00796b!important 818 | } 819 | .teal.darken-3 { 820 | background-color:#00695c!important 821 | } 822 | .teal-text.text-darken-3 { 823 | color:#00695c!important 824 | } 825 | .teal.darken-4 { 826 | background-color:#004d40!important 827 | } 828 | .teal-text.text-darken-4 { 829 | color:#004d40!important 830 | } 831 | .teal.accent-1 { 832 | background-color:#a7ffeb!important 833 | } 834 | .teal-text.text-accent-1 { 835 | color:#a7ffeb!important 836 | } 837 | .teal.accent-2 { 838 | background-color:#64ffda!important 839 | } 840 | .teal-text.text-accent-2 { 841 | color:#64ffda!important 842 | } 843 | .teal.accent-3 { 844 | background-color:#1de9b6!important 845 | } 846 | .teal-text.text-accent-3 { 847 | color:#1de9b6!important 848 | } 849 | .teal.accent-4 { 850 | background-color:#00bfa5!important 851 | } 852 | .teal-text.text-accent-4 { 853 | color:#00bfa5!important 854 | } 855 | .green { 856 | background-color:#4CAF50!important 857 | } 858 | .green-text { 859 | color:#4CAF50!important 860 | } 861 | .green.lighten-5 { 862 | background-color:#E8F5E9!important 863 | } 864 | .green-text.text-lighten-5 { 865 | color:#E8F5E9!important 866 | } 867 | .green.lighten-4 { 868 | background-color:#C8E6C9!important 869 | } 870 | .green-text.text-lighten-4 { 871 | color:#C8E6C9!important 872 | } 873 | .green.lighten-3 { 874 | background-color:#A5D6A7!important 875 | } 876 | .green-text.text-lighten-3 { 877 | color:#A5D6A7!important 878 | } 879 | .green.lighten-2 { 880 | background-color:#81C784!important 881 | } 882 | .green-text.text-lighten-2 { 883 | color:#81C784!important 884 | } 885 | .green.lighten-1 { 886 | background-color:#66BB6A!important 887 | } 888 | .green-text.text-lighten-1 { 889 | color:#66BB6A!important 890 | } 891 | .green.darken-1 { 892 | background-color:#43A047!important 893 | } 894 | .green-text.text-darken-1 { 895 | color:#43A047!important 896 | } 897 | .green.darken-2 { 898 | background-color:#388E3C!important 899 | } 900 | .green-text.text-darken-2 { 901 | color:#388E3C!important 902 | } 903 | .green.darken-3 { 904 | background-color:#2E7D32!important 905 | } 906 | .green-text.text-darken-3 { 907 | color:#2E7D32!important 908 | } 909 | .green.darken-4 { 910 | background-color:#1B5E20!important 911 | } 912 | .green-text.text-darken-4 { 913 | color:#1B5E20!important 914 | } 915 | .green.accent-1 { 916 | background-color:#B9F6CA!important 917 | } 918 | .green-text.text-accent-1 { 919 | color:#B9F6CA!important 920 | } 921 | .green.accent-2 { 922 | background-color:#69F0AE!important 923 | } 924 | .green-text.text-accent-2 { 925 | color:#69F0AE!important 926 | } 927 | .green.accent-3 { 928 | background-color:#00E676!important 929 | } 930 | .green-text.text-accent-3 { 931 | color:#00E676!important 932 | } 933 | .green.accent-4 { 934 | background-color:#00C853!important 935 | } 936 | .green-text.text-accent-4 { 937 | color:#00C853!important 938 | } 939 | .light-green { 940 | background-color:#8bc34a!important 941 | } 942 | .light-green-text { 943 | color:#8bc34a!important 944 | } 945 | .light-green.lighten-5 { 946 | background-color:#f1f8e9!important 947 | } 948 | .light-green-text.text-lighten-5 { 949 | color:#f1f8e9!important 950 | } 951 | .light-green.lighten-4 { 952 | background-color:#dcedc8!important 953 | } 954 | .light-green-text.text-lighten-4 { 955 | color:#dcedc8!important 956 | } 957 | .light-green.lighten-3 { 958 | background-color:#c5e1a5!important 959 | } 960 | .light-green-text.text-lighten-3 { 961 | color:#c5e1a5!important 962 | } 963 | .light-green.lighten-2 { 964 | background-color:#aed581!important 965 | } 966 | .light-green-text.text-lighten-2 { 967 | color:#aed581!important 968 | } 969 | .light-green.lighten-1 { 970 | background-color:#9ccc65!important 971 | } 972 | .light-green-text.text-lighten-1 { 973 | color:#9ccc65!important 974 | } 975 | .light-green.darken-1 { 976 | background-color:#7cb342!important 977 | } 978 | .light-green-text.text-darken-1 { 979 | color:#7cb342!important 980 | } 981 | .light-green.darken-2 { 982 | background-color:#689f38!important 983 | } 984 | .light-green-text.text-darken-2 { 985 | color:#689f38!important 986 | } 987 | .light-green.darken-3 { 988 | background-color:#558b2f!important 989 | } 990 | .light-green-text.text-darken-3 { 991 | color:#558b2f!important 992 | } 993 | .light-green.darken-4 { 994 | background-color:#33691e!important 995 | } 996 | .light-green-text.text-darken-4 { 997 | color:#33691e!important 998 | } 999 | .light-green.accent-1 { 1000 | background-color:#ccff90!important 1001 | } 1002 | .light-green-text.text-accent-1 { 1003 | color:#ccff90!important 1004 | } 1005 | .light-green.accent-2 { 1006 | background-color:#b2ff59!important 1007 | } 1008 | .light-green-text.text-accent-2 { 1009 | color:#b2ff59!important 1010 | } 1011 | .light-green.accent-3 { 1012 | background-color:#76ff03!important 1013 | } 1014 | .light-green-text.text-accent-3 { 1015 | color:#76ff03!important 1016 | } 1017 | .light-green.accent-4 { 1018 | background-color:#64dd17!important 1019 | } 1020 | .light-green-text.text-accent-4 { 1021 | color:#64dd17!important 1022 | } 1023 | .lime { 1024 | background-color:#cddc39!important 1025 | } 1026 | .lime-text { 1027 | color:#cddc39!important 1028 | } 1029 | .lime.lighten-5 { 1030 | background-color:#f9fbe7!important 1031 | } 1032 | .lime-text.text-lighten-5 { 1033 | color:#f9fbe7!important 1034 | } 1035 | .lime.lighten-4 { 1036 | background-color:#f0f4c3!important 1037 | } 1038 | .lime-text.text-lighten-4 { 1039 | color:#f0f4c3!important 1040 | } 1041 | .lime.lighten-3 { 1042 | background-color:#e6ee9c!important 1043 | } 1044 | .lime-text.text-lighten-3 { 1045 | color:#e6ee9c!important 1046 | } 1047 | .lime.lighten-2 { 1048 | background-color:#dce775!important 1049 | } 1050 | .lime-text.text-lighten-2 { 1051 | color:#dce775!important 1052 | } 1053 | .lime.lighten-1 { 1054 | background-color:#d4e157!important 1055 | } 1056 | .lime-text.text-lighten-1 { 1057 | color:#d4e157!important 1058 | } 1059 | .lime.darken-1 { 1060 | background-color:#c0ca33!important 1061 | } 1062 | .lime-text.text-darken-1 { 1063 | color:#c0ca33!important 1064 | } 1065 | .lime.darken-2 { 1066 | background-color:#afb42b!important 1067 | } 1068 | .lime-text.text-darken-2 { 1069 | color:#afb42b!important 1070 | } 1071 | .lime.darken-3 { 1072 | background-color:#9e9d24!important 1073 | } 1074 | .lime-text.text-darken-3 { 1075 | color:#9e9d24!important 1076 | } 1077 | .lime.darken-4 { 1078 | background-color:#827717!important 1079 | } 1080 | .lime-text.text-darken-4 { 1081 | color:#827717!important 1082 | } 1083 | .lime.accent-1 { 1084 | background-color:#f4ff81!important 1085 | } 1086 | .lime-text.text-accent-1 { 1087 | color:#f4ff81!important 1088 | } 1089 | .lime.accent-2 { 1090 | background-color:#eeff41!important 1091 | } 1092 | .lime-text.text-accent-2 { 1093 | color:#eeff41!important 1094 | } 1095 | .lime.accent-3 { 1096 | background-color:#c6ff00!important 1097 | } 1098 | .lime-text.text-accent-3 { 1099 | color:#c6ff00!important 1100 | } 1101 | .lime.accent-4 { 1102 | background-color:#aeea00!important 1103 | } 1104 | .lime-text.text-accent-4 { 1105 | color:#aeea00!important 1106 | } 1107 | .yellow { 1108 | background-color:#ffeb3b!important 1109 | } 1110 | .yellow-text { 1111 | color:#ffeb3b!important 1112 | } 1113 | .yellow.lighten-5 { 1114 | background-color:#fffde7!important 1115 | } 1116 | .yellow-text.text-lighten-5 { 1117 | color:#fffde7!important 1118 | } 1119 | .yellow.lighten-4 { 1120 | background-color:#fff9c4!important 1121 | } 1122 | .yellow-text.text-lighten-4 { 1123 | color:#fff9c4!important 1124 | } 1125 | .yellow.lighten-3 { 1126 | background-color:#fff59d!important 1127 | } 1128 | .yellow-text.text-lighten-3 { 1129 | color:#fff59d!important 1130 | } 1131 | .yellow.lighten-2 { 1132 | background-color:#fff176!important 1133 | } 1134 | .yellow-text.text-lighten-2 { 1135 | color:#fff176!important 1136 | } 1137 | .yellow.lighten-1 { 1138 | background-color:#ffee58!important 1139 | } 1140 | .yellow-text.text-lighten-1 { 1141 | color:#ffee58!important 1142 | } 1143 | .yellow.darken-1 { 1144 | background-color:#fdd835!important 1145 | } 1146 | .yellow-text.text-darken-1 { 1147 | color:#fdd835!important 1148 | } 1149 | .yellow.darken-2 { 1150 | background-color:#fbc02d!important 1151 | } 1152 | .yellow-text.text-darken-2 { 1153 | color:#fbc02d!important 1154 | } 1155 | .yellow.darken-3 { 1156 | background-color:#f9a825!important 1157 | } 1158 | .yellow-text.text-darken-3 { 1159 | color:#f9a825!important 1160 | } 1161 | .yellow.darken-4 { 1162 | background-color:#f57f17!important 1163 | } 1164 | .yellow-text.text-darken-4 { 1165 | color:#f57f17!important 1166 | } 1167 | .yellow.accent-1 { 1168 | background-color:#ffff8d!important 1169 | } 1170 | .yellow-text.text-accent-1 { 1171 | color:#ffff8d!important 1172 | } 1173 | .yellow.accent-2 { 1174 | background-color:#ff0!important 1175 | } 1176 | .yellow-text.text-accent-2 { 1177 | color:#ff0!important 1178 | } 1179 | .yellow.accent-3 { 1180 | background-color:#ffea00!important 1181 | } 1182 | .yellow-text.text-accent-3 { 1183 | color:#ffea00!important 1184 | } 1185 | .yellow.accent-4 { 1186 | background-color:#ffd600!important 1187 | } 1188 | .yellow-text.text-accent-4 { 1189 | color:#ffd600!important 1190 | } 1191 | .amber { 1192 | background-color:#ffc107!important 1193 | } 1194 | .amber-text { 1195 | color:#ffc107!important 1196 | } 1197 | .amber.lighten-5 { 1198 | background-color:#fff8e1!important 1199 | } 1200 | .amber-text.text-lighten-5 { 1201 | color:#fff8e1!important 1202 | } 1203 | .amber.lighten-4 { 1204 | background-color:#ffecb3!important 1205 | } 1206 | .amber-text.text-lighten-4 { 1207 | color:#ffecb3!important 1208 | } 1209 | .amber.lighten-3 { 1210 | background-color:#ffe082!important 1211 | } 1212 | .amber-text.text-lighten-3 { 1213 | color:#ffe082!important 1214 | } 1215 | .amber.lighten-2 { 1216 | background-color:#ffd54f!important 1217 | } 1218 | .amber-text.text-lighten-2 { 1219 | color:#ffd54f!important 1220 | } 1221 | .amber.lighten-1 { 1222 | background-color:#ffca28!important 1223 | } 1224 | .amber-text.text-lighten-1 { 1225 | color:#ffca28!important 1226 | } 1227 | .amber.darken-1 { 1228 | background-color:#ffb300!important 1229 | } 1230 | .amber-text.text-darken-1 { 1231 | color:#ffb300!important 1232 | } 1233 | .amber.darken-2 { 1234 | background-color:#ffa000!important 1235 | } 1236 | .amber-text.text-darken-2 { 1237 | color:#ffa000!important 1238 | } 1239 | .amber.darken-3 { 1240 | background-color:#ff8f00!important 1241 | } 1242 | .amber-text.text-darken-3 { 1243 | color:#ff8f00!important 1244 | } 1245 | .amber.darken-4 { 1246 | background-color:#ff6f00!important 1247 | } 1248 | .amber-text.text-darken-4 { 1249 | color:#ff6f00!important 1250 | } 1251 | .amber.accent-1 { 1252 | background-color:#ffe57f!important 1253 | } 1254 | .amber-text.text-accent-1 { 1255 | color:#ffe57f!important 1256 | } 1257 | .amber.accent-2 { 1258 | background-color:#ffd740!important 1259 | } 1260 | .amber-text.text-accent-2 { 1261 | color:#ffd740!important 1262 | } 1263 | .amber.accent-3 { 1264 | background-color:#ffc400!important 1265 | } 1266 | .amber-text.text-accent-3 { 1267 | color:#ffc400!important 1268 | } 1269 | .amber.accent-4 { 1270 | background-color:#ffab00!important 1271 | } 1272 | .amber-text.text-accent-4 { 1273 | color:#ffab00!important 1274 | } 1275 | .orange { 1276 | background-color:#ff9800!important 1277 | } 1278 | .orange-text { 1279 | color:#ff9800!important 1280 | } 1281 | .orange.lighten-5 { 1282 | background-color:#fff3e0!important 1283 | } 1284 | .orange-text.text-lighten-5 { 1285 | color:#fff3e0!important 1286 | } 1287 | .orange.lighten-4 { 1288 | background-color:#ffe0b2!important 1289 | } 1290 | .orange-text.text-lighten-4 { 1291 | color:#ffe0b2!important 1292 | } 1293 | .orange.lighten-3 { 1294 | background-color:#ffcc80!important 1295 | } 1296 | .orange-text.text-lighten-3 { 1297 | color:#ffcc80!important 1298 | } 1299 | .orange.lighten-2 { 1300 | background-color:#ffb74d!important 1301 | } 1302 | .orange-text.text-lighten-2 { 1303 | color:#ffb74d!important 1304 | } 1305 | .orange.lighten-1 { 1306 | background-color:#ffa726!important 1307 | } 1308 | .orange-text.text-lighten-1 { 1309 | color:#ffa726!important 1310 | } 1311 | .orange.darken-1 { 1312 | background-color:#fb8c00!important 1313 | } 1314 | .orange-text.text-darken-1 { 1315 | color:#fb8c00!important 1316 | } 1317 | .orange.darken-2 { 1318 | background-color:#f57c00!important 1319 | } 1320 | .orange-text.text-darken-2 { 1321 | color:#f57c00!important 1322 | } 1323 | .orange.darken-3 { 1324 | background-color:#ef6c00!important 1325 | } 1326 | .orange-text.text-darken-3 { 1327 | color:#ef6c00!important 1328 | } 1329 | .orange.darken-4 { 1330 | background-color:#e65100!important 1331 | } 1332 | .orange-text.text-darken-4 { 1333 | color:#e65100!important 1334 | } 1335 | .orange.accent-1 { 1336 | background-color:#ffd180!important 1337 | } 1338 | .orange-text.text-accent-1 { 1339 | color:#ffd180!important 1340 | } 1341 | .orange.accent-2 { 1342 | background-color:#ffab40!important 1343 | } 1344 | .orange-text.text-accent-2 { 1345 | color:#ffab40!important 1346 | } 1347 | .orange.accent-3 { 1348 | background-color:#ff9100!important 1349 | } 1350 | .orange-text.text-accent-3 { 1351 | color:#ff9100!important 1352 | } 1353 | .orange.accent-4 { 1354 | background-color:#ff6d00!important 1355 | } 1356 | .orange-text.text-accent-4 { 1357 | color:#ff6d00!important 1358 | } 1359 | .deep-orange { 1360 | background-color:#ff5722!important 1361 | } 1362 | .deep-orange-text { 1363 | color:#ff5722!important 1364 | } 1365 | .deep-orange.lighten-5 { 1366 | background-color:#fbe9e7!important 1367 | } 1368 | .deep-orange-text.text-lighten-5 { 1369 | color:#fbe9e7!important 1370 | } 1371 | .deep-orange.lighten-4 { 1372 | background-color:#ffccbc!important 1373 | } 1374 | .deep-orange-text.text-lighten-4 { 1375 | color:#ffccbc!important 1376 | } 1377 | .deep-orange.lighten-3 { 1378 | background-color:#ffab91!important 1379 | } 1380 | .deep-orange-text.text-lighten-3 { 1381 | color:#ffab91!important 1382 | } 1383 | .deep-orange.lighten-2 { 1384 | background-color:#ff8a65!important 1385 | } 1386 | .deep-orange-text.text-lighten-2 { 1387 | color:#ff8a65!important 1388 | } 1389 | .deep-orange.lighten-1 { 1390 | background-color:#ff7043!important 1391 | } 1392 | .deep-orange-text.text-lighten-1 { 1393 | color:#ff7043!important 1394 | } 1395 | .deep-orange.darken-1 { 1396 | background-color:#f4511e!important 1397 | } 1398 | .deep-orange-text.text-darken-1 { 1399 | color:#f4511e!important 1400 | } 1401 | .deep-orange.darken-2 { 1402 | background-color:#e64a19!important 1403 | } 1404 | .deep-orange-text.text-darken-2 { 1405 | color:#e64a19!important 1406 | } 1407 | .deep-orange.darken-3 { 1408 | background-color:#d84315!important 1409 | } 1410 | .deep-orange-text.text-darken-3 { 1411 | color:#d84315!important 1412 | } 1413 | .deep-orange.darken-4 { 1414 | background-color:#bf360c!important 1415 | } 1416 | .deep-orange-text.text-darken-4 { 1417 | color:#bf360c!important 1418 | } 1419 | .deep-orange.accent-1 { 1420 | background-color:#ff9e80!important 1421 | } 1422 | .deep-orange-text.text-accent-1 { 1423 | color:#ff9e80!important 1424 | } 1425 | .deep-orange.accent-2 { 1426 | background-color:#ff6e40!important 1427 | } 1428 | .deep-orange-text.text-accent-2 { 1429 | color:#ff6e40!important 1430 | } 1431 | .deep-orange.accent-3 { 1432 | background-color:#ff3d00!important 1433 | } 1434 | .deep-orange-text.text-accent-3 { 1435 | color:#ff3d00!important 1436 | } 1437 | .deep-orange.accent-4 { 1438 | background-color:#dd2c00!important 1439 | } 1440 | .deep-orange-text.text-accent-4 { 1441 | color:#dd2c00!important 1442 | } 1443 | .brown { 1444 | background-color:#795548!important 1445 | } 1446 | .brown-text { 1447 | color:#795548!important 1448 | } 1449 | .brown.lighten-5 { 1450 | background-color:#efebe9!important 1451 | } 1452 | .brown-text.text-lighten-5 { 1453 | color:#efebe9!important 1454 | } 1455 | .brown.lighten-4 { 1456 | background-color:#d7ccc8!important 1457 | } 1458 | .brown-text.text-lighten-4 { 1459 | color:#d7ccc8!important 1460 | } 1461 | .brown.lighten-3 { 1462 | background-color:#bcaaa4!important 1463 | } 1464 | .brown-text.text-lighten-3 { 1465 | color:#bcaaa4!important 1466 | } 1467 | .brown.lighten-2 { 1468 | background-color:#a1887f!important 1469 | } 1470 | .brown-text.text-lighten-2 { 1471 | color:#a1887f!important 1472 | } 1473 | .brown.lighten-1 { 1474 | background-color:#8d6e63!important 1475 | } 1476 | .brown-text.text-lighten-1 { 1477 | color:#8d6e63!important 1478 | } 1479 | .brown.darken-1 { 1480 | background-color:#6d4c41!important 1481 | } 1482 | .brown-text.text-darken-1 { 1483 | color:#6d4c41!important 1484 | } 1485 | .brown.darken-2 { 1486 | background-color:#5d4037!important 1487 | } 1488 | .brown-text.text-darken-2 { 1489 | color:#5d4037!important 1490 | } 1491 | .brown.darken-3 { 1492 | background-color:#4e342e!important 1493 | } 1494 | .brown-text.text-darken-3 { 1495 | color:#4e342e!important 1496 | } 1497 | .brown.darken-4 { 1498 | background-color:#3e2723!important 1499 | } 1500 | .brown-text.text-darken-4 { 1501 | color:#3e2723!important 1502 | } 1503 | .blue-grey { 1504 | background-color:#607d8b!important 1505 | } 1506 | .blue-grey-text { 1507 | color:#607d8b!important 1508 | } 1509 | .blue-grey.lighten-5 { 1510 | background-color:#eceff1!important 1511 | } 1512 | .blue-grey-text.text-lighten-5 { 1513 | color:#eceff1!important 1514 | } 1515 | .blue-grey.lighten-4 { 1516 | background-color:#cfd8dc!important 1517 | } 1518 | .blue-grey-text.text-lighten-4 { 1519 | color:#cfd8dc!important 1520 | } 1521 | .blue-grey.lighten-3 { 1522 | background-color:#b0bec5!important 1523 | } 1524 | .blue-grey-text.text-lighten-3 { 1525 | color:#b0bec5!important 1526 | } 1527 | .blue-grey.lighten-2 { 1528 | background-color:#90a4ae!important 1529 | } 1530 | .blue-grey-text.text-lighten-2 { 1531 | color:#90a4ae!important 1532 | } 1533 | .blue-grey.lighten-1 { 1534 | background-color:#78909c!important 1535 | } 1536 | .blue-grey-text.text-lighten-1 { 1537 | color:#78909c!important 1538 | } 1539 | .blue-grey.darken-1 { 1540 | background-color:#546e7a!important 1541 | } 1542 | .blue-grey-text.text-darken-1 { 1543 | color:#546e7a!important 1544 | } 1545 | .blue-grey.darken-2 { 1546 | background-color:#455a64!important 1547 | } 1548 | .blue-grey-text.text-darken-2 { 1549 | color:#455a64!important 1550 | } 1551 | .blue-grey.darken-3 { 1552 | background-color:#37474f!important 1553 | } 1554 | .blue-grey-text.text-darken-3 { 1555 | color:#37474f!important 1556 | } 1557 | .blue-grey.darken-4 { 1558 | background-color:#263238!important 1559 | } 1560 | .blue-grey-text.text-darken-4 { 1561 | color:#263238!important 1562 | } 1563 | .grey { 1564 | background-color:#9e9e9e!important 1565 | } 1566 | .grey-text { 1567 | color:#9e9e9e!important 1568 | } 1569 | .grey.lighten-5 { 1570 | background-color:#fafafa!important 1571 | } 1572 | .grey-text.text-lighten-5 { 1573 | color:#fafafa!important 1574 | } 1575 | .grey.lighten-4 { 1576 | background-color:#f5f5f5!important 1577 | } 1578 | .grey-text.text-lighten-4 { 1579 | color:#f5f5f5!important 1580 | } 1581 | .grey.lighten-3 { 1582 | background-color:#eee!important 1583 | } 1584 | .grey-text.text-lighten-3 { 1585 | color:#eee!important 1586 | } 1587 | .grey.lighten-2 { 1588 | background-color:#e0e0e0!important 1589 | } 1590 | .grey-text.text-lighten-2 { 1591 | color:#e0e0e0!important 1592 | } 1593 | .grey.lighten-1 { 1594 | background-color:#bdbdbd!important 1595 | } 1596 | .grey-text.text-lighten-1 { 1597 | color:#bdbdbd!important 1598 | } 1599 | .grey.darken-1 { 1600 | background-color:#757575!important 1601 | } 1602 | .grey-text.text-darken-1 { 1603 | color:#757575!important 1604 | } 1605 | .grey.darken-2 { 1606 | background-color:#616161!important 1607 | } 1608 | .grey-text.text-darken-2 { 1609 | color:#616161!important 1610 | } 1611 | .grey.darken-3 { 1612 | background-color:#424242!important 1613 | } 1614 | .grey-text.text-darken-3 { 1615 | color:#424242!important 1616 | } 1617 | .grey.darken-4 { 1618 | background-color:#212121!important 1619 | } 1620 | .grey-text.text-darken-4 { 1621 | color:#212121!important 1622 | } 1623 | .shades.black { 1624 | background-color:#000!important 1625 | } 1626 | .shades-text.text-black { 1627 | color:#000!important 1628 | } 1629 | .shades.white { 1630 | background-color:#fff!important 1631 | } 1632 | .shades-text.text-white { 1633 | color:#fff!important 1634 | } 1635 | .shades.transparent { 1636 | background-color:transparent!important 1637 | } 1638 | .shades-text.text-transparent { 1639 | color:transparent!important 1640 | } 1641 | .black { 1642 | background-color:#000!important 1643 | } 1644 | .black-text { 1645 | color:#000!important 1646 | } 1647 | .white { 1648 | background-color:#fff!important 1649 | } 1650 | .white-text { 1651 | color:#fff!important 1652 | } 1653 | .transparent { 1654 | background-color:transparent!important 1655 | } 1656 | .transparent-text { 1657 | color:transparent!important 1658 | } 1659 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */body { 1660 | margin:0 1661 | } 1662 | article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { 1663 | display:block 1664 | } 1665 | audio,canvas,progress,video { 1666 | display:inline-block; 1667 | vertical-align:baseline 1668 | } 1669 | audio:not([controls]) { 1670 | display:none; 1671 | height:0 1672 | } 1673 | [hidden],template { 1674 | display:none 1675 | } 1676 | a { 1677 | background-color:transparent 1678 | } 1679 | a:active,a:hover { 1680 | outline:0 1681 | } 1682 | abbr[title] { 1683 | border-bottom:1px dotted 1684 | } 1685 | b,optgroup,strong { 1686 | font-weight:700 1687 | } 1688 | dfn { 1689 | font-style:italic 1690 | } 1691 | mark { 1692 | background:#ff0; 1693 | color:#000 1694 | } 1695 | sub,sup { 1696 | font-size:75%; 1697 | line-height:0; 1698 | position:relative; 1699 | vertical-align:baseline 1700 | } 1701 | sup { 1702 | top:-.5em 1703 | } 1704 | sub { 1705 | bottom:-.25em 1706 | } 1707 | svg:not(:root) { 1708 | overflow:hidden 1709 | } 1710 | figure { 1711 | margin:1em 40px 1712 | } 1713 | hr { 1714 | box-sizing:content-box; 1715 | height:0 1716 | } 1717 | pre,textarea { 1718 | overflow:auto 1719 | } 1720 | code,kbd,pre,samp { 1721 | font-family:monospace,monospace; 1722 | font-size:1em 1723 | } 1724 | button,input,optgroup,select,textarea { 1725 | color:inherit; 1726 | font:inherit; 1727 | margin:0 1728 | } 1729 | .breadcrumb:before,.materialbox-caption,body,html { 1730 | -webkit-font-smoothing:antialiased 1731 | } 1732 | button { 1733 | overflow:visible 1734 | } 1735 | button,select { 1736 | text-transform:none 1737 | } 1738 | button,html input[type=button],input[type=reset],input[type=submit] { 1739 | -webkit-appearance:button; 1740 | cursor:pointer 1741 | } 1742 | button[disabled],html input[disabled] { 1743 | cursor:default 1744 | } 1745 | button::-moz-focus-inner,input::-moz-focus-inner { 1746 | border:0; 1747 | padding:0 1748 | } 1749 | input { 1750 | line-height:normal 1751 | } 1752 | input[type=checkbox],input[type=radio] { 1753 | box-sizing:border-box; 1754 | padding:0 1755 | } 1756 | input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { 1757 | height:auto 1758 | } 1759 | input[type=search] { 1760 | -webkit-appearance:textfield; 1761 | box-sizing:content-box 1762 | } 1763 | input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration { 1764 | -webkit-appearance:none 1765 | } 1766 | fieldset { 1767 | border:1px solid silver; 1768 | margin:0 2px; 1769 | padding:.35em .625em .75em 1770 | } 1771 | *,:after,:before { 1772 | box-sizing:inherit 1773 | } 1774 | .collapsible-body,.row .col,span.badge { 1775 | box-sizing:border-box 1776 | } 1777 | ul { 1778 | list-style-type:none 1779 | } 1780 | ul.browser-default { 1781 | list-style-type:initial 1782 | } 1783 | .valign-wrapper { 1784 | display:flex; 1785 | align-items:center 1786 | } 1787 | .valign-wrapper .valign { 1788 | display:block 1789 | } 1790 | ul li { 1791 | list-style-type:none 1792 | } 1793 | .z-depth-0 { 1794 | box-shadow:none!important 1795 | } 1796 | .btn,.btn-floating,.btn-large,.card,.card-panel,.collapsible,.dropdown-content,.side-nav,.toast,.z-depth-1,nav { 1797 | box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12) 1798 | } 1799 | .btn-floating:hover,.btn-large:hover,.btn:hover,.z-depth-1-half { 1800 | box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15) 1801 | } 1802 | .z-depth-2 { 1803 | box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19) 1804 | } 1805 | .z-depth-3 { 1806 | box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19) 1807 | } 1808 | .modal,.z-depth-4 { 1809 | box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21) 1810 | } 1811 | .z-depth-5 { 1812 | box-shadow:0 27px 24px 0 rgba(0,0,0,.2),0 40px 77px 0 rgba(0,0,0,.22) 1813 | } 1814 | .hoverable { 1815 | transition:box-shadow .25s; 1816 | box-shadow:0 1817 | } 1818 | .hoverable:hover { 1819 | transition:box-shadow .25s; 1820 | box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19) 1821 | } 1822 | .divider { 1823 | height:1px; 1824 | overflow:hidden 1825 | } 1826 | blockquote { 1827 | margin:20px 0; 1828 | padding-left:1.5rem; 1829 | border-left:5px solid #414B82 1830 | } 1831 | i { 1832 | line-height:inherit 1833 | } 1834 | i.left { 1835 | float:left; 1836 | margin-right:15px 1837 | } 1838 | i.right { 1839 | float:right; 1840 | margin-left:15px 1841 | } 1842 | i.tiny { 1843 | font-size:1rem 1844 | } 1845 | i.small { 1846 | font-size:2rem 1847 | } 1848 | i.medium { 1849 | font-size:4rem 1850 | } 1851 | i.large { 1852 | font-size:6rem 1853 | } 1854 | img.responsive-img,video.responsive-video { 1855 | max-width:100%; 1856 | height:auto 1857 | } 1858 | .pagination li { 1859 | display:inline-block; 1860 | font-size:1.2rem; 1861 | padding:0 10px; 1862 | line-height:30px; 1863 | border-radius:2px 1864 | } 1865 | .pagination li a { 1866 | color:#444 1867 | } 1868 | .pagination li.active a { 1869 | color:#fff 1870 | } 1871 | .pagination li.active { 1872 | background-color:#414B82 1873 | } 1874 | .pagination li.disabled a { 1875 | cursor:default; 1876 | color:#999 1877 | } 1878 | .card .card-title.activator,nav ul a { 1879 | cursor:pointer 1880 | } 1881 | .pagination li i { 1882 | font-size:2.2rem; 1883 | vertical-align:middle 1884 | } 1885 | .pagination li.pages ul li { 1886 | display:inline-block; 1887 | float:none 1888 | } 1889 | .breadcrumb { 1890 | font-size:18px; 1891 | color:rgba(255,255,255,.7) 1892 | } 1893 | .breadcrumb [class*=mdi-],.breadcrumb [class^=mdi-],.breadcrumb i,.breadcrumb i.material-icons { 1894 | display:inline-block; 1895 | float:left; 1896 | font-size:24px 1897 | } 1898 | .breadcrumb:before { 1899 | content:'\E5CC'; 1900 | color:rgba(255,255,255,.7); 1901 | vertical-align:top; 1902 | display:inline-block; 1903 | font-family:'Material Icons'; 1904 | font-weight:400; 1905 | font-style:normal; 1906 | font-size:25px; 1907 | margin:0 10px 0 8px 1908 | } 1909 | html,p { 1910 | font-family:"Roboto Condensed",sans-serif 1911 | } 1912 | .breadcrumb:first-child:before { 1913 | display:none 1914 | } 1915 | .breadcrumb:last-child { 1916 | color:#fff 1917 | } 1918 | .parallax-container { 1919 | position:relative; 1920 | overflow:hidden; 1921 | height:500px 1922 | } 1923 | .parallax,.parallax img { 1924 | position:absolute; 1925 | bottom:0 1926 | } 1927 | .parallax { 1928 | top:0; 1929 | left:0; 1930 | right:0; 1931 | z-index:-1 1932 | } 1933 | .parallax img { 1934 | display:none; 1935 | left:50%; 1936 | min-width:100%; 1937 | min-height:100%; 1938 | -webkit-transform:translate3d(0,0,0); 1939 | transform:translate3d(0,0,0); 1940 | transform:translateX(-50%) 1941 | } 1942 | .collection,.pin-bottom,.pin-top { 1943 | position:relative 1944 | } 1945 | .pinned { 1946 | position:fixed!important 1947 | } 1948 | .fade-in { 1949 | transform-origin:0 50% 1950 | } 1951 | @media only screen and (max-width:600px) { 1952 | .hide-on-small-and-down,.hide-on-small-only { 1953 | display:none!important 1954 | } 1955 | } 1956 | @media only screen and (max-width:992px) { 1957 | .pagination { 1958 | width:100% 1959 | } 1960 | .pagination li.next,.pagination li.prev { 1961 | width:10% 1962 | } 1963 | .pagination li.pages { 1964 | width:80%; 1965 | overflow:hidden; 1966 | white-space:nowrap 1967 | } 1968 | .hide-on-med-and-down { 1969 | display:none!important 1970 | } 1971 | } 1972 | @media only screen and (min-width:601px) { 1973 | .hide-on-med-and-up { 1974 | display:none!important 1975 | } 1976 | } 1977 | @media only screen and (min-width:600px) and (max-width:992px) { 1978 | .hide-on-med-only { 1979 | display:none!important 1980 | } 1981 | } 1982 | @media only screen and (min-width:993px) { 1983 | .hide-on-large-only { 1984 | display:none!important 1985 | } 1986 | .show-on-large { 1987 | display:block!important 1988 | } 1989 | } 1990 | @media only screen and (min-width:600px) and (max-width:992px) { 1991 | .show-on-medium { 1992 | display:block!important 1993 | } 1994 | } 1995 | @media only screen and (min-width:601px) { 1996 | .show-on-medium-and-up { 1997 | display:block!important 1998 | } 1999 | } 2000 | @media only screen and (max-width:992px) { 2001 | .show-on-medium-and-down { 2002 | display:block!important 2003 | } 2004 | } 2005 | @media only screen and (max-width:600px) { 2006 | .show-on-small { 2007 | display:block!important 2008 | } 2009 | .center-on-small-only { 2010 | text-align:center 2011 | } 2012 | } 2013 | footer.page-footer { 2014 | margin-top:20px; 2015 | padding-top:20px; 2016 | background-color:#ee6e73 2017 | } 2018 | footer.page-footer .footer-copyright { 2019 | overflow:hidden; 2020 | height:50px; 2021 | line-height:50px; 2022 | color:rgba(255,255,255,.8); 2023 | background-color:rgba(51,51,51,.08) 2024 | } 2025 | table.highlight>tbody>tr:hover,table.striped>tbody>tr:nth-child(odd) { 2026 | background-color:#f2f2f2 2027 | } 2028 | table,td,th { 2029 | border:none 2030 | } 2031 | table { 2032 | width:100%; 2033 | display:table 2034 | } 2035 | table.striped>tbody>tr>td { 2036 | border-radius:0 2037 | } 2038 | table.highlight>tbody>tr { 2039 | transition:background-color .25s ease 2040 | } 2041 | td,th { 2042 | padding:15px 5px; 2043 | display:table-cell; 2044 | text-align:left; 2045 | vertical-align:middle; 2046 | border-radius:2px 2047 | } 2048 | @media only screen and (max-width:992px) { 2049 | table.responsive-table { 2050 | width:100%; 2051 | border-collapse:collapse; 2052 | border-spacing:0; 2053 | display:block; 2054 | position:relative 2055 | } 2056 | table.responsive-table td:empty:before { 2057 | content:'\00a0' 2058 | } 2059 | table.responsive-table td,table.responsive-table th { 2060 | margin:0; 2061 | vertical-align:top 2062 | } 2063 | table.responsive-table thead { 2064 | display:block; 2065 | float:left; 2066 | border:0; 2067 | border-right:1px solid #d0d0d0 2068 | } 2069 | table.responsive-table thead tr { 2070 | display:block; 2071 | padding:0 10px 0 0 2072 | } 2073 | table.responsive-table thead tr th::before { 2074 | content:"\00a0" 2075 | } 2076 | table.responsive-table tbody { 2077 | display:block; 2078 | width:auto; 2079 | position:relative; 2080 | overflow-x:auto; 2081 | white-space:nowrap 2082 | } 2083 | table.responsive-table tbody tr { 2084 | display:inline-block; 2085 | vertical-align:top 2086 | } 2087 | table.responsive-table th { 2088 | display:block; 2089 | text-align:right 2090 | } 2091 | table.responsive-table td { 2092 | display:block; 2093 | min-height:1.25em; 2094 | text-align:left 2095 | } 2096 | table.responsive-table tr { 2097 | padding:0 10px 2098 | } 2099 | table.responsive-table.bordered th { 2100 | border-bottom:0; 2101 | border-left:0 2102 | } 2103 | table.responsive-table.bordered td { 2104 | border-left:0; 2105 | border-right:0; 2106 | border-bottom:0 2107 | } 2108 | table.responsive-table.bordered tr { 2109 | border:0 2110 | } 2111 | table.responsive-table.bordered tbody tr { 2112 | border-right:1px solid #d0d0d0 2113 | } 2114 | } 2115 | .collection { 2116 | margin:.5rem 0 1rem; 2117 | border:1px solid #e0e0e0; 2118 | border-radius:2px; 2119 | overflow:hidden 2120 | } 2121 | .collection .collection-item { 2122 | background-color:#fff; 2123 | line-height:1.5rem; 2124 | padding:10px 20px; 2125 | margin:0; 2126 | border-bottom:1px solid #e0e0e0 2127 | } 2128 | .collection .collection-item.avatar { 2129 | min-height:84px; 2130 | padding-left:72px; 2131 | position:relative 2132 | } 2133 | .collection .collection-item.avatar .circle { 2134 | position:absolute; 2135 | width:42px; 2136 | height:42px; 2137 | overflow:hidden; 2138 | left:15px; 2139 | display:inline-block; 2140 | vertical-align:middle 2141 | } 2142 | .collection .collection-item.avatar i.circle { 2143 | font-size:18px; 2144 | line-height:42px; 2145 | color:#fff; 2146 | background-color:#999; 2147 | text-align:center 2148 | } 2149 | .collection .collection-item.avatar .title { 2150 | font-size:16px 2151 | } 2152 | .collection .collection-item.avatar p { 2153 | margin:0 2154 | } 2155 | .collection .collection-item.avatar .secondary-content { 2156 | position:absolute; 2157 | top:16px; 2158 | right:16px 2159 | } 2160 | .collection .collection-item:last-child { 2161 | border-bottom:none 2162 | } 2163 | .collection .collection-item.active { 2164 | background-color:#26a69a; 2165 | color:#eafaf9 2166 | } 2167 | .collection .collection-item.active .secondary-content { 2168 | color:#fff 2169 | } 2170 | .collection a.collection-item { 2171 | display:block; 2172 | transition:.25s; 2173 | color:#26a69a 2174 | } 2175 | .collection a.collection-item:not(.active):hover { 2176 | background-color:#ddd 2177 | } 2178 | .collection.with-header .collection-header { 2179 | background-color:#fff; 2180 | border-bottom:1px solid #e0e0e0; 2181 | padding:10px 20px 2182 | } 2183 | .collection.with-header .collection-item { 2184 | padding-left:30px 2185 | } 2186 | .collection.with-header .collection-item.avatar { 2187 | padding-left:72px 2188 | } 2189 | .secondary-content { 2190 | float:right; 2191 | color:#fbc02d 2192 | } 2193 | .collapsible .collection { 2194 | margin:0; 2195 | border:none 2196 | } 2197 | span.badge { 2198 | min-width:3rem; 2199 | padding:0 6px; 2200 | text-align:center; 2201 | font-size:1rem; 2202 | line-height:inherit; 2203 | color:#757575; 2204 | position:absolute; 2205 | right:15px 2206 | } 2207 | span.badge.new { 2208 | font-weight:300; 2209 | font-size:.8rem; 2210 | color:#fff; 2211 | background-color:#fbc02d; 2212 | border-radius:2px 2213 | } 2214 | span.badge.new:after { 2215 | content:" new" 2216 | } 2217 | nav ul a span.badge { 2218 | position:static; 2219 | margin-left:4px; 2220 | line-height:0 2221 | } 2222 | .video-container { 2223 | position:relative; 2224 | padding-bottom:56.25%; 2225 | height:0; 2226 | overflow:hidden 2227 | } 2228 | .video-container embed,.video-container iframe,.video-container object { 2229 | position:absolute; 2230 | top:0; 2231 | left:0; 2232 | width:100%; 2233 | height:100% 2234 | } 2235 | .progress { 2236 | position:relative; 2237 | height:4px; 2238 | display:block; 2239 | width:100%; 2240 | background-color:#acece6; 2241 | border-radius:2px; 2242 | margin:.5rem 0 1rem; 2243 | overflow:hidden 2244 | } 2245 | .progress .determinate,.progress .indeterminate { 2246 | background-color:#26a69a 2247 | } 2248 | .progress .determinate { 2249 | position:absolute; 2250 | top:0; 2251 | left:0; 2252 | bottom:0; 2253 | transition:width .3s linear 2254 | } 2255 | nav ul a,nav ul li { 2256 | transition:background-color .3s 2257 | } 2258 | .progress .indeterminate:after,.progress .indeterminate:before { 2259 | content:''; 2260 | position:absolute; 2261 | background-color:inherit; 2262 | left:0; 2263 | top:0; 2264 | bottom:0; 2265 | will-change:left,right 2266 | } 2267 | .progress .indeterminate:before { 2268 | animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite 2269 | } 2270 | .progress .indeterminate:after { 2271 | animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite; 2272 | animation-delay:1.15s 2273 | } 2274 | .row .col[class*=push-],.row .col[class*=pull-],nav .nav-wrapper { 2275 | position:relative 2276 | } 2277 | nav ul a:hover,nav ul li.active { 2278 | background-color:rgba(0,0,0,.1) 2279 | } 2280 | @keyframes indeterminate { 2281 | 0% { 2282 | left:-35%; 2283 | right:100% 2284 | } 2285 | 100%,60% { 2286 | left:100%; 2287 | right:-90% 2288 | } 2289 | } 2290 | @keyframes indeterminate-short { 2291 | 0% { 2292 | left:-200%; 2293 | right:100% 2294 | } 2295 | 100%,60% { 2296 | left:107%; 2297 | right:-8% 2298 | } 2299 | } 2300 | .row .col.s1,.row .col.s10,.row .col.s11,.row .col.s12,.row .col.s2,.row .col.s3,.row .col.s4,.row .col.s5,.row .col.s7,.row .col.s8,.row .col.s9 { 2301 | left:auto; 2302 | right:auto 2303 | } 2304 | .hide { 2305 | display:none!important 2306 | } 2307 | .left-align { 2308 | text-align:left 2309 | } 2310 | .right-align { 2311 | text-align:right 2312 | } 2313 | .btn,.btn-floating i,.btn-large,.center,.center-align,.material-tooltip,.tabs .tab { 2314 | text-align:center 2315 | } 2316 | .left { 2317 | float:left!important 2318 | } 2319 | .right { 2320 | float:right!important 2321 | } 2322 | .row .col,nav ul li,nav ul.left { 2323 | float:left 2324 | } 2325 | .no-select,input[type=range],input[type=range]+.thumb { 2326 | -webkit-touch-callout:none; 2327 | -webkit-user-select:none; 2328 | -khtml-user-select:none; 2329 | -moz-user-select:none; 2330 | -ms-user-select:none; 2331 | user-select:none 2332 | } 2333 | .circle { 2334 | border-radius:50% 2335 | } 2336 | .center-block { 2337 | display:block; 2338 | margin-left:auto; 2339 | margin-right:auto 2340 | } 2341 | .truncate { 2342 | display:block; 2343 | overflow:hidden; 2344 | text-overflow:ellipsis 2345 | } 2346 | .material-icons { 2347 | text-rendering:optimizeLegibility; 2348 | font-feature-settings:'liga' 2349 | } 2350 | .container { 2351 | margin:0 auto; 2352 | max-width:1280px; 2353 | width:90% 2354 | } 2355 | .logo { 2356 | height:auto; 2357 | width:auto; 2358 | position:relative; 2359 | display: block; 2360 | margin: 0 auto; 2361 | 2362 | } 2363 | @media only screen and (min-width:601px) { 2364 | .container { 2365 | width:85% 2366 | } 2367 | } 2368 | @media only screen and (min-width:993px) { 2369 | .container { 2370 | width:70% 2371 | } 2372 | } 2373 | .container .row { 2374 | margin-left:-.75rem; 2375 | margin-right:-.75rem 2376 | } 2377 | .row,.row .col.s1,.row .col.s10,.row .col.s11,.row .col.s12,.row .col.s2,.row .col.s3,.row .col.s4,.row .col.s5,.row .col.s7,.row .col.s8,.row .col.s9 { 2378 | margin-left:auto 2379 | } 2380 | .section { 2381 | padding-top:1rem; 2382 | padding-bottom:1rem 2383 | } 2384 | .section.no-pad { 2385 | padding:0 2386 | } 2387 | .section.no-pad-bot { 2388 | padding-bottom:0 2389 | } 2390 | .section.no-pad-top { 2391 | padding-top:0 2392 | } 2393 | .row { 2394 | margin-right:auto; 2395 | margin-bottom:20px 2396 | } 2397 | .row:after { 2398 | content:""; 2399 | display:table 2400 | } 2401 | .row .col { 2402 | padding:0 .75rem 2403 | } 2404 | .row .col.s1 { 2405 | width:8.33333% 2406 | } 2407 | .row .col.s2 { 2408 | width:16.66667% 2409 | } 2410 | .row .col.s3 { 2411 | width:25% 2412 | } 2413 | .row .col.s4 { 2414 | width:33.33333% 2415 | } 2416 | .row .col.s5 { 2417 | width:41.66667% 2418 | } 2419 | .row .col.s6 { 2420 | width:50%; 2421 | margin-left:auto; 2422 | left:auto; 2423 | right:auto 2424 | } 2425 | .row .col.s7 { 2426 | width:58.33333% 2427 | } 2428 | .row .col.s8 { 2429 | width:66.66667% 2430 | } 2431 | .row .col.s9 { 2432 | width:75% 2433 | } 2434 | .row .col.s10 { 2435 | width:83.33333% 2436 | } 2437 | .row .col.s11 { 2438 | width:91.66667% 2439 | } 2440 | .row .col.s12 { 2441 | width:100% 2442 | } 2443 | .row .col.offset-s1 { 2444 | margin-left:8.33333% 2445 | } 2446 | .row .col.pull-s1 { 2447 | right:8.33333% 2448 | } 2449 | .row .col.push-s1 { 2450 | left:8.33333% 2451 | } 2452 | .row .col.offset-s2 { 2453 | margin-left:16.66667% 2454 | } 2455 | .row .col.pull-s2 { 2456 | right:16.66667% 2457 | } 2458 | .row .col.push-s2 { 2459 | left:16.66667% 2460 | } 2461 | .row .col.offset-s3 { 2462 | margin-left:25% 2463 | } 2464 | .row .col.pull-s3 { 2465 | right:25% 2466 | } 2467 | .row .col.push-s3 { 2468 | left:25% 2469 | } 2470 | .row .col.offset-s4 { 2471 | margin-left:33.33333% 2472 | } 2473 | .row .col.pull-s4 { 2474 | right:33.33333% 2475 | } 2476 | .row .col.push-s4 { 2477 | left:33.33333% 2478 | } 2479 | .row .col.offset-s5 { 2480 | margin-left:41.66667% 2481 | } 2482 | .row .col.pull-s5 { 2483 | right:41.66667% 2484 | } 2485 | .row .col.push-s5 { 2486 | left:41.66667% 2487 | } 2488 | .row .col.offset-s6 { 2489 | margin-left:50% 2490 | } 2491 | .row .col.pull-s6 { 2492 | right:50% 2493 | } 2494 | .row .col.push-s6 { 2495 | left:50% 2496 | } 2497 | .row .col.offset-s7 { 2498 | margin-left:58.33333% 2499 | } 2500 | .row .col.pull-s7 { 2501 | right:58.33333% 2502 | } 2503 | .row .col.push-s7 { 2504 | left:58.33333% 2505 | } 2506 | .row .col.offset-s8 { 2507 | margin-left:66.66667% 2508 | } 2509 | .row .col.pull-s8 { 2510 | right:66.66667% 2511 | } 2512 | .row .col.push-s8 { 2513 | left:66.66667% 2514 | } 2515 | .row .col.offset-s9 { 2516 | margin-left:75% 2517 | } 2518 | .row .col.pull-s9 { 2519 | right:75% 2520 | } 2521 | .row .col.push-s9 { 2522 | left:75% 2523 | } 2524 | .row .col.offset-s10 { 2525 | margin-left:83.33333% 2526 | } 2527 | .row .col.pull-s10 { 2528 | right:83.33333% 2529 | } 2530 | .row .col.push-s10 { 2531 | left:83.33333% 2532 | } 2533 | .row .col.offset-s11 { 2534 | margin-left:91.66667% 2535 | } 2536 | .row .col.pull-s11 { 2537 | right:91.66667% 2538 | } 2539 | .row .col.push-s11 { 2540 | left:91.66667% 2541 | } 2542 | .row .col.offset-s12 { 2543 | margin-left:100% 2544 | } 2545 | .row .col.pull-s12 { 2546 | right:100% 2547 | } 2548 | .row .col.push-s12 { 2549 | left:100% 2550 | } 2551 | @media only screen and (min-width:601px) { 2552 | .row .col.m1,.row .col.m10,.row .col.m11,.row .col.m12,.row .col.m2,.row .col.m3,.row .col.m4,.row .col.m5,.row .col.m7,.row .col.m8,.row .col.m9 { 2553 | margin-left:auto; 2554 | left:auto; 2555 | right:auto 2556 | } 2557 | .row .col.m1 { 2558 | width:8.33333% 2559 | } 2560 | .row .col.m2 { 2561 | width:16.66667% 2562 | } 2563 | .row .col.m3 { 2564 | width:25% 2565 | } 2566 | .row .col.m4 { 2567 | width:33.33333% 2568 | } 2569 | .row .col.m5 { 2570 | width:41.66667% 2571 | } 2572 | .row .col.m6 { 2573 | width:50%; 2574 | margin-left:auto; 2575 | left:auto; 2576 | right:auto 2577 | } 2578 | .row .col.m7 { 2579 | width:58.33333% 2580 | } 2581 | .row .col.m8 { 2582 | width:66.66667% 2583 | } 2584 | .row .col.m9 { 2585 | width:75% 2586 | } 2587 | .row .col.m10 { 2588 | width:83.33333% 2589 | } 2590 | .row .col.m11 { 2591 | width:91.66667% 2592 | } 2593 | .row .col.m12 { 2594 | width:100% 2595 | } 2596 | .row .col.offset-m1 { 2597 | margin-left:8.33333% 2598 | } 2599 | .row .col.pull-m1 { 2600 | right:8.33333% 2601 | } 2602 | .row .col.push-m1 { 2603 | left:8.33333% 2604 | } 2605 | .row .col.offset-m2 { 2606 | margin-left:16.66667% 2607 | } 2608 | .row .col.pull-m2 { 2609 | right:16.66667% 2610 | } 2611 | .row .col.push-m2 { 2612 | left:16.66667% 2613 | } 2614 | .row .col.offset-m3 { 2615 | margin-left:25% 2616 | } 2617 | .row .col.pull-m3 { 2618 | right:25% 2619 | } 2620 | .row .col.push-m3 { 2621 | left:25% 2622 | } 2623 | .row .col.offset-m4 { 2624 | margin-left:33.33333% 2625 | } 2626 | .row .col.pull-m4 { 2627 | right:33.33333% 2628 | } 2629 | .row .col.push-m4 { 2630 | left:33.33333% 2631 | } 2632 | .row .col.offset-m5 { 2633 | margin-left:41.66667% 2634 | } 2635 | .row .col.pull-m5 { 2636 | right:41.66667% 2637 | } 2638 | .row .col.push-m5 { 2639 | left:41.66667% 2640 | } 2641 | .row .col.offset-m6 { 2642 | margin-left:50% 2643 | } 2644 | .row .col.pull-m6 { 2645 | right:50% 2646 | } 2647 | .row .col.push-m6 { 2648 | left:50% 2649 | } 2650 | .row .col.offset-m7 { 2651 | margin-left:58.33333% 2652 | } 2653 | .row .col.pull-m7 { 2654 | right:58.33333% 2655 | } 2656 | .row .col.push-m7 { 2657 | left:58.33333% 2658 | } 2659 | .row .col.offset-m8 { 2660 | margin-left:66.66667% 2661 | } 2662 | .row .col.pull-m8 { 2663 | right:66.66667% 2664 | } 2665 | .row .col.push-m8 { 2666 | left:66.66667% 2667 | } 2668 | .row .col.offset-m9 { 2669 | margin-left:75% 2670 | } 2671 | .row .col.pull-m9 { 2672 | right:75% 2673 | } 2674 | .row .col.push-m9 { 2675 | left:75% 2676 | } 2677 | .row .col.offset-m10 { 2678 | margin-left:83.33333% 2679 | } 2680 | .row .col.pull-m10 { 2681 | right:83.33333% 2682 | } 2683 | .row .col.push-m10 { 2684 | left:83.33333% 2685 | } 2686 | .row .col.offset-m11 { 2687 | margin-left:91.66667% 2688 | } 2689 | .row .col.pull-m11 { 2690 | right:91.66667% 2691 | } 2692 | .row .col.push-m11 { 2693 | left:91.66667% 2694 | } 2695 | .row .col.offset-m12 { 2696 | margin-left:100% 2697 | } 2698 | .row .col.pull-m12 { 2699 | right:100% 2700 | } 2701 | .row .col.push-m12 { 2702 | left:100% 2703 | } 2704 | } 2705 | nav { 2706 | color:#fff; 2707 | height:56px; 2708 | line-height:56px 2709 | } 2710 | nav [class*=mdi-],nav [class^=mdi-],nav i,nav i.material-icons { 2711 | display:block; 2712 | font-size:2rem; 2713 | height:56px; 2714 | line-height:56px 2715 | } 2716 | nav .nav-wrapper { 2717 | height:100% 2718 | } 2719 | @media only screen and (min-width:993px) { 2720 | .row .col.l1,.row .col.l10,.row .col.l11,.row .col.l12,.row .col.l2,.row .col.l3,.row .col.l4,.row .col.l5,.row .col.l7,.row .col.l8,.row .col.l9 { 2721 | margin-left:auto; 2722 | left:auto; 2723 | right:auto 2724 | } 2725 | .row .col.l1 { 2726 | width:8.33333% 2727 | } 2728 | .row .col.l2 { 2729 | width:16.66667% 2730 | } 2731 | .row .col.l3 { 2732 | width:25% 2733 | } 2734 | .row .col.l4 { 2735 | width:33.33333% 2736 | } 2737 | .row .col.l5 { 2738 | width:41.66667% 2739 | } 2740 | .row .col.l6 { 2741 | width:50%; 2742 | margin-left:auto; 2743 | left:auto; 2744 | right:auto 2745 | } 2746 | .row .col.l7 { 2747 | width:58.33333% 2748 | } 2749 | .row .col.l8 { 2750 | width:66.66667% 2751 | } 2752 | .row .col.l9 { 2753 | width:75% 2754 | } 2755 | .row .col.l10 { 2756 | width:83.33333% 2757 | } 2758 | .row .col.l11 { 2759 | width:91.66667% 2760 | } 2761 | .row .col.l12 { 2762 | width:100% 2763 | } 2764 | .row .col.offset-l1 { 2765 | margin-left:8.33333% 2766 | } 2767 | .row .col.pull-l1 { 2768 | right:8.33333% 2769 | } 2770 | .row .col.push-l1 { 2771 | left:8.33333% 2772 | } 2773 | .row .col.offset-l2 { 2774 | margin-left:16.66667% 2775 | } 2776 | .row .col.pull-l2 { 2777 | right:16.66667% 2778 | } 2779 | .row .col.push-l2 { 2780 | left:16.66667% 2781 | } 2782 | .row .col.offset-l3 { 2783 | margin-left:25% 2784 | } 2785 | .row .col.pull-l3 { 2786 | right:25% 2787 | } 2788 | .row .col.push-l3 { 2789 | left:25% 2790 | } 2791 | .row .col.offset-l4 { 2792 | margin-left:33.33333% 2793 | } 2794 | .row .col.pull-l4 { 2795 | right:33.33333% 2796 | } 2797 | .row .col.push-l4 { 2798 | left:33.33333% 2799 | } 2800 | .row .col.offset-l5 { 2801 | margin-left:41.66667% 2802 | } 2803 | .row .col.pull-l5 { 2804 | right:41.66667% 2805 | } 2806 | .row .col.push-l5 { 2807 | left:41.66667% 2808 | } 2809 | .row .col.offset-l6 { 2810 | margin-left:50% 2811 | } 2812 | .row .col.pull-l6 { 2813 | right:50% 2814 | } 2815 | .row .col.push-l6 { 2816 | left:50% 2817 | } 2818 | .row .col.offset-l7 { 2819 | margin-left:58.33333% 2820 | } 2821 | .row .col.pull-l7 { 2822 | right:58.33333% 2823 | } 2824 | .row .col.push-l7 { 2825 | left:58.33333% 2826 | } 2827 | .row .col.offset-l8 { 2828 | margin-left:66.66667% 2829 | } 2830 | .row .col.pull-l8 { 2831 | right:66.66667% 2832 | } 2833 | .row .col.push-l8 { 2834 | left:66.66667% 2835 | } 2836 | .row .col.offset-l9 { 2837 | margin-left:75% 2838 | } 2839 | .row .col.pull-l9 { 2840 | right:75% 2841 | } 2842 | .row .col.push-l9 { 2843 | left:75% 2844 | } 2845 | .row .col.offset-l10 { 2846 | margin-left:83.33333% 2847 | } 2848 | .row .col.pull-l10 { 2849 | right:83.33333% 2850 | } 2851 | .row .col.push-l10 { 2852 | left:83.33333% 2853 | } 2854 | .row .col.offset-l11 { 2855 | margin-left:91.66667% 2856 | } 2857 | .row .col.pull-l11 { 2858 | right:91.66667% 2859 | } 2860 | .row .col.push-l11 { 2861 | left:91.66667% 2862 | } 2863 | .row .col.offset-l12 { 2864 | margin-left:100% 2865 | } 2866 | .row .col.pull-l12 { 2867 | right:100% 2868 | } 2869 | .row .col.push-l12 { 2870 | left:100% 2871 | } 2872 | nav a.button-collapse { 2873 | display:none 2874 | } 2875 | } 2876 | nav .brand-logo,nav ul a { 2877 | color:#fff; 2878 | display:inline-block 2879 | } 2880 | nav .button-collapse { 2881 | float:left; 2882 | position:relative; 2883 | z-index:1; 2884 | height:56px 2885 | } 2886 | nav .button-collapse i { 2887 | font-size:2.7rem; 2888 | height:56px; 2889 | line-height:56px 2890 | } 2891 | nav .brand-logo { 2892 | position:absolute; 2893 | font-size:2.1rem; 2894 | padding:0 2895 | } 2896 | nav .brand-logo.center { 2897 | left:50%; 2898 | transform:translateX(-50%) 2899 | } 2900 | @media only screen and (max-width:992px) { 2901 | nav .brand-logo { 2902 | left:50%; 2903 | transform:translateX(-50%) 2904 | } 2905 | nav .brand-logo.left,nav .brand-logo.right { 2906 | padding:0; 2907 | transform:none 2908 | } 2909 | nav .brand-logo.left { 2910 | left:.5rem 2911 | } 2912 | nav .brand-logo.right { 2913 | right:.5rem; 2914 | left:auto 2915 | } 2916 | } 2917 | nav .brand-logo.right { 2918 | right:.5rem; 2919 | padding:0 2920 | } 2921 | nav ul { 2922 | margin:0 2923 | } 2924 | nav ul li { 2925 | padding:0 2926 | } 2927 | nav ul a { 2928 | font-size:1rem; 2929 | padding:0 15px 2930 | } 2931 | nav ul a.btn,nav ul a.btn-flat,nav ul a.btn-floating,nav ul a.btn-large { 2932 | margin-top:-2px; 2933 | margin-left:15px; 2934 | margin-right:15px 2935 | } 2936 | nav .input-field { 2937 | margin:0 2938 | } 2939 | nav .input-field input { 2940 | height:100%; 2941 | font-size:1.2rem; 2942 | border:none; 2943 | padding-left:2rem 2944 | } 2945 | nav .input-field input:focus,nav .input-field input[type=date]:valid,nav .input-field input[type=email]:valid,nav .input-field input[type=password]:valid,nav .input-field input[type=text]:valid,nav .input-field input[type=url]:valid { 2946 | border:none; 2947 | box-shadow:none 2948 | } 2949 | nav .input-field label { 2950 | top:0; 2951 | left:0 2952 | } 2953 | nav .input-field label i { 2954 | color:rgba(255,255,255,.7); 2955 | transition:color .3s 2956 | } 2957 | nav .input-field label.active i { 2958 | color:#fff 2959 | } 2960 | nav .input-field label.active { 2961 | transform:translateY(0) 2962 | } 2963 | .navbar-fixed { 2964 | position:relative; 2965 | height:56px 2966 | } 2967 | .navbar-fixed nav { 2968 | position:fixed 2969 | } 2970 | .card,.card.large,.card.medium,.card.small { 2971 | position:relative 2972 | } 2973 | @media only screen and (min-width:601px) { 2974 | nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i { 2975 | height:64px; 2976 | line-height:64px 2977 | } 2978 | .navbar-fixed { 2979 | height:64px 2980 | } 2981 | } 2982 | h1,h2,h3,h4 { 2983 | line-height:110% 2984 | } 2985 | @media only screen and (min-width:0) { 2986 | html { 2987 | font-size:14px 2988 | } 2989 | } 2990 | @media only screen and (min-width:992px) { 2991 | html { 2992 | font-size:14.5px 2993 | } 2994 | } 2995 | @media only screen and (min-width:1200px) { 2996 | html { 2997 | font-size:15px 2998 | } 2999 | } 3000 | h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { 3001 | font-weight:inherit 3002 | } 3003 | h1 { 3004 | font-size:4.2rem; 3005 | margin:2.1rem 0 1.68rem 3006 | } 3007 | h2 { 3008 | font-size:3.56rem; 3009 | margin:1.78rem 0 1.424rem; 3010 | font-family:Arial; 3011 | } 3012 | h3 { 3013 | font-size:2.92rem; 3014 | margin:1.46rem 0 1.168rem 3015 | } 3016 | h4 { 3017 | font-size:2.28rem; 3018 | margin:1.14rem 0 .912rem 3019 | } 3020 | h5 { 3021 | font-size:1.3rem; 3022 | margin:.82rem 0 .6rem 3023 | } 3024 | h6 { 3025 | font-size:1rem; 3026 | margin:.5rem 0 .4rem 3027 | } 3028 | .card,.card-panel { 3029 | margin:.5rem 0 1rem; 3030 | background-color:#fff; 3031 | transition:box-shadow .25s; 3032 | border-radius:2px 3033 | } 3034 | em { 3035 | font-style:italic 3036 | } 3037 | strong { 3038 | font-weight:500 3039 | } 3040 | small { 3041 | font-size:75% 3042 | } 3043 | .light,footer.page-footer .footer-copyright { 3044 | font-weight:300 3045 | } 3046 | .thin { 3047 | font-weight:200 3048 | } 3049 | .card .card-title,.flow-text,.toast { 3050 | font-weight:300 3051 | } 3052 | @media only screen and (min-width:360px) { 3053 | .flow-text { 3054 | font-size:1.2rem 3055 | } 3056 | } 3057 | @media only screen and (min-width:390px) { 3058 | .flow-text { 3059 | font-size:1.224rem 3060 | } 3061 | } 3062 | @media only screen and (min-width:420px) { 3063 | .flow-text { 3064 | font-size:1.248rem 3065 | } 3066 | } 3067 | @media only screen and (min-width:450px) { 3068 | .flow-text { 3069 | font-size:1.272rem 3070 | } 3071 | } 3072 | @media only screen and (min-width:480px) { 3073 | .flow-text { 3074 | font-size:1.296rem 3075 | } 3076 | } 3077 | @media only screen and (min-width:510px) { 3078 | .flow-text { 3079 | font-size:1.32rem 3080 | } 3081 | } 3082 | @media only screen and (min-width:540px) { 3083 | .flow-text { 3084 | font-size:1.344rem 3085 | } 3086 | } 3087 | @media only screen and (min-width:570px) { 3088 | .flow-text { 3089 | font-size:1.368rem 3090 | } 3091 | } 3092 | @media only screen and (min-width:600px) { 3093 | .flow-text { 3094 | font-size:1.392rem 3095 | } 3096 | } 3097 | @media only screen and (min-width:630px) { 3098 | .flow-text { 3099 | font-size:1.416rem 3100 | } 3101 | } 3102 | @media only screen and (min-width:660px) { 3103 | .flow-text { 3104 | font-size:1.44rem 3105 | } 3106 | } 3107 | @media only screen and (min-width:690px) { 3108 | .flow-text { 3109 | font-size:1.464rem 3110 | } 3111 | } 3112 | @media only screen and (min-width:720px) { 3113 | .flow-text { 3114 | font-size:1.488rem 3115 | } 3116 | } 3117 | @media only screen and (min-width:750px) { 3118 | .flow-text { 3119 | font-size:1.512rem 3120 | } 3121 | } 3122 | @media only screen and (min-width:780px) { 3123 | .flow-text { 3124 | font-size:1.536rem 3125 | } 3126 | } 3127 | @media only screen and (min-width:810px) { 3128 | .flow-text { 3129 | font-size:1.56rem 3130 | } 3131 | } 3132 | @media only screen and (min-width:840px) { 3133 | .flow-text { 3134 | font-size:1.584rem 3135 | } 3136 | } 3137 | @media only screen and (min-width:870px) { 3138 | .flow-text { 3139 | font-size:1.608rem 3140 | } 3141 | } 3142 | @media only screen and (min-width:900px) { 3143 | .flow-text { 3144 | font-size:1.632rem 3145 | } 3146 | } 3147 | @media only screen and (min-width:930px) { 3148 | .flow-text { 3149 | font-size:1.656rem 3150 | } 3151 | } 3152 | @media only screen and (min-width:960px) { 3153 | .flow-text { 3154 | font-size:1.68rem 3155 | } 3156 | } 3157 | @media only screen and (max-width:360px) { 3158 | .flow-text { 3159 | font-size:1.2rem 3160 | } 3161 | } 3162 | .card-panel { 3163 | padding:20px 3164 | } 3165 | .card .card-title { 3166 | font-size:24px 3167 | } 3168 | .card.large .card-image,.card.medium .card-image,.card.small .card-image { 3169 | max-height:60%; 3170 | overflow:hidden 3171 | } 3172 | .card.large .card-content,.card.medium .card-content,.card.small .card-content { 3173 | max-height:40%; 3174 | overflow:hidden 3175 | } 3176 | .card.large .card-action,.card.medium .card-action,.card.small .card-action { 3177 | position:absolute; 3178 | bottom:0; 3179 | left:0; 3180 | right:0 3181 | } 3182 | .card.small { 3183 | height:300px 3184 | } 3185 | .card.medium { 3186 | height:400px 3187 | } 3188 | .card.large { 3189 | height:500px 3190 | } 3191 | .card .card-image { 3192 | position:relative 3193 | } 3194 | .card .card-image img { 3195 | display:block; 3196 | border-radius:2px 2px 0 0; 3197 | position:relative; 3198 | left:0; 3199 | right:0; 3200 | top:0; 3201 | bottom:0; 3202 | width:100% 3203 | } 3204 | .card .card-image .card-title { 3205 | color:#fff; 3206 | position:absolute; 3207 | bottom:0; 3208 | left:0; 3209 | padding:20px 3210 | } 3211 | .card .card-content { 3212 | padding:20px; 3213 | border-radius:0 0 2px 2px 3214 | } 3215 | .card .card-content p { 3216 | margin:0; 3217 | color:inherit 3218 | } 3219 | .card .card-content .card-title { 3220 | line-height:48px 3221 | } 3222 | .card .card-action { 3223 | position:relative; 3224 | background-color:inherit; 3225 | border-top:1px solid rgba(160,160,160,.2); 3226 | padding:20px; 3227 | z-index:2 3228 | } 3229 | .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) { 3230 | color:#ffab40; 3231 | margin-right:20px; 3232 | transition:color .3s ease; 3233 | text-transform:uppercase 3234 | } 3235 | .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating):hover { 3236 | color:#ffd8a6 3237 | } 3238 | .card .card-action+.card-reveal { 3239 | z-index:1; 3240 | padding-bottom:64px 3241 | } 3242 | .card .card-reveal { 3243 | padding:20px; 3244 | position:absolute; 3245 | background-color:#fff; 3246 | width:100%; 3247 | overflow-y:auto; 3248 | top:100%; 3249 | height:100%; 3250 | z-index:3; 3251 | display:none 3252 | } 3253 | .card .card-reveal .card-title { 3254 | cursor:pointer; 3255 | display:block 3256 | } 3257 | #toast-container { 3258 | display:block; 3259 | position:fixed; 3260 | z-index:10000 3261 | } 3262 | .tabs,.toast { 3263 | display:flex; 3264 | position:relative 3265 | } 3266 | @media only screen and (max-width:600px) { 3267 | #toast-container { 3268 | min-width:100%; 3269 | bottom:0 3270 | } 3271 | } 3272 | @media only screen and (min-width:601px) and (max-width:992px) { 3273 | #toast-container { 3274 | left:5%; 3275 | bottom:7%; 3276 | max-width:90% 3277 | } 3278 | .toast { 3279 | float:left 3280 | } 3281 | } 3282 | @media only screen and (min-width:993px) { 3283 | #toast-container { 3284 | top:10%; 3285 | right:7%; 3286 | max-width:86% 3287 | } 3288 | } 3289 | .toast { 3290 | border-radius:2px; 3291 | top:0; 3292 | width:auto; 3293 | margin-top:10px; 3294 | max-width:100%; 3295 | height:auto; 3296 | min-height:48px; 3297 | line-height:1.5em; 3298 | word-break:break-all; 3299 | background-color:#323232; 3300 | padding:10px 25px; 3301 | font-size:1.1rem; 3302 | color:#fff; 3303 | align-items:center; 3304 | justify-content:space-between 3305 | } 3306 | .toast .btn,.toast .btn-flat,.toast .btn-large { 3307 | margin:0 0 0 3rem 3308 | } 3309 | .toast.rounded { 3310 | border-radius:24px 3311 | } 3312 | @media only screen and (max-width:600px) { 3313 | .toast { 3314 | width:100%; 3315 | border-radius:0 3316 | } 3317 | } 3318 | @media only screen and (min-width:993px) { 3319 | .toast { 3320 | float:right 3321 | } 3322 | } 3323 | .tabs { 3324 | overflow-x:auto; 3325 | overflow-y:hidden; 3326 | height:48px; 3327 | background-color:#fff; 3328 | margin:0 auto; 3329 | width:100% 3330 | } 3331 | .tabs .tab,.tabs .tab a { 3332 | display:block; 3333 | text-overflow:ellipsis 3334 | } 3335 | .tabs .tab { 3336 | -webkit-box-flex:1; 3337 | -webkit-flex-grow:1; 3338 | -ms-flex-positive:1; 3339 | flex-grow:1; 3340 | float:left; 3341 | line-height:48px; 3342 | height:48px; 3343 | padding:0; 3344 | margin:0; 3345 | text-transform:uppercase; 3346 | overflow:hidden; 3347 | letter-spacing:.8px; 3348 | width:15%; 3349 | min-width:80px 3350 | } 3351 | .tabs .tab a { 3352 | color:#ee6e73; 3353 | width:100%; 3354 | height:100%; 3355 | overflow:hidden; 3356 | transition:color .28s ease 3357 | } 3358 | .backdrop,.material-tooltip { 3359 | position:absolute; 3360 | display:none; 3361 | opacity:0 3362 | } 3363 | .tabs .tab a:hover { 3364 | color:#f9c9cb 3365 | } 3366 | .tabs .tab.disabled a { 3367 | color:#f9c9cb; 3368 | cursor:default 3369 | } 3370 | .tabs .indicator { 3371 | position:absolute; 3372 | bottom:0; 3373 | height:2px; 3374 | background-color:#f6b2b5; 3375 | will-change:left,right 3376 | } 3377 | .material-tooltip { 3378 | padding:10px 8px; 3379 | font-size:1rem; 3380 | z-index:2000; 3381 | background-color:transparent; 3382 | border-radius:2px; 3383 | color:#fff; 3384 | min-height:36px; 3385 | line-height:120%; 3386 | max-width:calc(100% - 4px); 3387 | overflow:hidden; 3388 | left:0; 3389 | top:0; 3390 | pointer-events:none; 3391 | will-change:top,left 3392 | } 3393 | .backdrop { 3394 | height:7px; 3395 | width:14px; 3396 | border-radius:0 0 14px 14px; 3397 | background-color:#323232; 3398 | z-index:-1; 3399 | transform-origin:50% 10%; 3400 | will-change:transform,opacity 3401 | } 3402 | .btn,.btn-flat,.btn-large { 3403 | border:none; 3404 | border-radius:2px; 3405 | display:inline-block; 3406 | height:36px; 3407 | line-height:36px; 3408 | outline:0; 3409 | padding:0 2rem; 3410 | text-transform:uppercase; 3411 | vertical-align:middle 3412 | } 3413 | .btn-floating.disabled,.btn-floating:disabled,.btn-large.disabled,.btn-large:disabled .btn-large:disabled,.btn.disabled,.btn:disabled .btn-large:disabled,.disabled.btn-large { 3414 | background-color:#DFDFDF!important; 3415 | box-shadow:none; 3416 | color:#9F9F9F!important; 3417 | cursor:default 3418 | } 3419 | .btn-floating.disabled *,.btn-floating:disabled *,.btn-large.disabled *,.btn-large:disabled .btn-large:disabled *,.btn.disabled *,.btn:disabled .btn-large:disabled *,.disabled.btn-large * { 3420 | pointer-events:none 3421 | } 3422 | .btn-floating.disabled:hover,.btn-floating:disabled:hover,.btn-large.disabled:hover,.btn-large:disabled .btn-large:disabled:hover,.btn.disabled:hover,.btn:disabled .btn-large:disabled:hover,.disabled.btn-large:hover { 3423 | background-color:#DFDFDF!important; 3424 | color:#9F9F9F!important 3425 | } 3426 | .btn i,.btn-flat i,.btn-floating i,.btn-large i { 3427 | font-size:1.3rem; 3428 | line-height:inherit 3429 | } 3430 | .btn-floating i,.btn-large i { 3431 | font-size:1.6rem 3432 | } 3433 | .btn-floating,.btn-floating i { 3434 | color:#fff; 3435 | line-height:37px; 3436 | display:inline-block 3437 | } 3438 | .btn,.btn-large { 3439 | color:#fff; 3440 | background-color:#26a69a; 3441 | letter-spacing:.5px; 3442 | transition:.2s ease-out; 3443 | cursor:pointer 3444 | } 3445 | .btn-large:hover,.btn:hover { 3446 | background-color:#2bbbad 3447 | } 3448 | .btn-floating,.btn-floating:hover { 3449 | background-color:#26a69a 3450 | } 3451 | .btn-floating { 3452 | position:relative; 3453 | overflow:hidden; 3454 | z-index:1; 3455 | width:37px; 3456 | height:37px; 3457 | padding:0; 3458 | border-radius:50%; 3459 | transition:.3s; 3460 | cursor:pointer; 3461 | vertical-align:middle 3462 | } 3463 | .btn-floating i { 3464 | width:inherit 3465 | } 3466 | .btn-floating:before { 3467 | border-radius:0 3468 | } 3469 | .btn-floating.btn-large { 3470 | width:55.5px; 3471 | height:55.5px 3472 | } 3473 | .btn-floating.btn-large i { 3474 | line-height:55.5px 3475 | } 3476 | button.btn-floating { 3477 | border:none 3478 | } 3479 | .fixed-action-btn { 3480 | position:fixed; 3481 | right:23px; 3482 | bottom:23px; 3483 | padding-top:15px; 3484 | margin-bottom:0; 3485 | z-index:998 3486 | } 3487 | .fixed-action-btn.active ul { 3488 | visibility:visible 3489 | } 3490 | .fixed-action-btn.horizontal { 3491 | padding:0 0 0 15px 3492 | } 3493 | .fixed-action-btn.horizontal ul { 3494 | text-align:right; 3495 | right:64px; 3496 | top:50%; 3497 | transform:translateY(-50%); 3498 | height:100%; 3499 | left:auto; 3500 | width:500px 3501 | } 3502 | .fixed-action-btn.horizontal ul li { 3503 | display:inline-block; 3504 | margin:15px 15px 0 0 3505 | } 3506 | .fixed-action-btn ul { 3507 | left:0; 3508 | right:0; 3509 | text-align:center; 3510 | position:absolute; 3511 | bottom:64px; 3512 | margin:0; 3513 | visibility:hidden 3514 | } 3515 | .fixed-action-btn ul li { 3516 | margin-bottom:15px 3517 | } 3518 | .fixed-action-btn ul a.btn-floating { 3519 | opacity:0 3520 | } 3521 | .btn-flat { 3522 | box-shadow:none; 3523 | background-color:transparent; 3524 | color:#343434; 3525 | cursor:pointer 3526 | } 3527 | .btn-flat.disabled { 3528 | color:#b3b3b3; 3529 | cursor:default 3530 | } 3531 | .btn-large { 3532 | height:54px; 3533 | line-height:54px 3534 | } 3535 | .btn-block { 3536 | display:block 3537 | } 3538 | .dropdown-content { 3539 | background-color:#fff; 3540 | margin:0; 3541 | display:none; 3542 | max-height:650px; 3543 | overflow-y:auto; 3544 | opacity:0; 3545 | position:absolute; 3546 | z-index:999; 3547 | will-change:width,height 3548 | } 3549 | .dropdown-content li { 3550 | clear:both; 3551 | cursor:pointer; 3552 | min-height:50px; 3553 | width:100%; 3554 | text-align:left; 3555 | text-transform:none 3556 | } 3557 | .dropdown-content li.active,.dropdown-content li.selected,.dropdown-content li:hover { 3558 | background-color:#eee 3559 | } 3560 | .dropdown-content li.active.selected { 3561 | background-color:#e1e1e1 3562 | } 3563 | .dropdown-content li.divider { 3564 | min-height:0; 3565 | height:1px 3566 | } 3567 | .dropdown-content li>a,.dropdown-content li>span { 3568 | font-size:16px; 3569 | color:#26a69a; 3570 | display:block; 3571 | line-height:22px; 3572 | padding:14px 16px 3573 | } 3574 | .dropdown-content li>span>label { 3575 | top:1px; 3576 | left:3px; 3577 | height:18px 3578 | } 3579 | .dropdown-content li>a>i { 3580 | height:inherit; 3581 | line-height:inherit 3582 | } 3583 | /*! 3584 | * Waves v0.6.0 3585 | * http://fian.my.id/Waves 3586 | * 3587 | * Copyright 2014 Alfiana E. Sibuea and other contributors 3588 | * Released under the MIT license 3589 | * https://github.com/fians/Waves/blob/master/LICENSE 3590 | */.waves-effect { 3591 | position:relative; 3592 | cursor:pointer; 3593 | display:inline-block; 3594 | overflow:hidden; 3595 | -webkit-user-select:none; 3596 | -moz-user-select:none; 3597 | -ms-user-select:none; 3598 | user-select:none; 3599 | vertical-align:middle; 3600 | z-index:1; 3601 | will-change:opacity,transform; 3602 | transition:all .3s ease-out 3603 | } 3604 | .waves-effect .waves-ripple { 3605 | position:absolute; 3606 | border-radius:50%; 3607 | width:20px; 3608 | height:20px; 3609 | margin-top:-10px; 3610 | margin-left:-10px; 3611 | opacity:0; 3612 | background:rgba(0,0,0,.2); 3613 | transition:all .7s ease-out; 3614 | transition-property:transform,opacity; 3615 | transform:scale(0); 3616 | pointer-events:none 3617 | } 3618 | .waves-effect.waves-light .waves-ripple { 3619 | background-color:rgba(255,255,255,.45) 3620 | } 3621 | .waves-effect.waves-red .waves-ripple { 3622 | background-color:rgba(244,67,54,.7) 3623 | } 3624 | .waves-effect.waves-yellow .waves-ripple { 3625 | background-color:rgba(255,235,59,.7) 3626 | } 3627 | .waves-effect.waves-orange .waves-ripple { 3628 | background-color:rgba(255,152,0,.7) 3629 | } 3630 | .waves-effect.waves-purple .waves-ripple { 3631 | background-color:rgba(156,39,176,.7) 3632 | } 3633 | .waves-effect.waves-green .waves-ripple { 3634 | background-color:rgba(76,175,80,.7) 3635 | } 3636 | .waves-effect.waves-teal .waves-ripple { 3637 | background-color:rgba(0,150,136,.7) 3638 | } 3639 | .waves-effect input[type=button],.waves-effect input[type=reset],.waves-effect input[type=submit] { 3640 | border:0; 3641 | font-style:normal; 3642 | font-size:inherit; 3643 | text-transform:inherit; 3644 | background:0 0 3645 | } 3646 | .key-concept p,.key-concept ul,.testimonials h3 { 3647 | font-style:italic 3648 | } 3649 | .waves-notransition { 3650 | transition:none!important 3651 | } 3652 | .waves-input-wrapper { 3653 | border-radius:.2em; 3654 | vertical-align:bottom 3655 | } 3656 | .waves-input-wrapper .waves-button-input { 3657 | position:relative; 3658 | top:0; 3659 | left:0; 3660 | z-index:1 3661 | } 3662 | .waves-circle { 3663 | transform:translateZ(0); 3664 | text-align:center; 3665 | width:2.5em; 3666 | height:2.5em; 3667 | line-height:2.5em; 3668 | border-radius:50%; 3669 | -webkit-mask-image:none 3670 | } 3671 | .waves-block { 3672 | display:block 3673 | } 3674 | .lean-overlay,.modal { 3675 | position:fixed; 3676 | display:none; 3677 | left:0; 3678 | right:0 3679 | } 3680 | a.waves-effect .waves-ripple { 3681 | z-index:-1 3682 | } 3683 | .modal { 3684 | background-color:#fafafa; 3685 | padding:0; 3686 | max-height:70%; 3687 | width:55%; 3688 | margin:auto; 3689 | overflow-y:auto; 3690 | border-radius:2px; 3691 | will-change:top,opacity 3692 | } 3693 | @media only screen and (max-width:992px) { 3694 | .modal { 3695 | width:80% 3696 | } 3697 | } 3698 | .modal h1,.modal h2,.modal h3,.modal h4 { 3699 | margin-top:0 3700 | } 3701 | .modal .modal-content { 3702 | padding:24px 3703 | } 3704 | .modal .modal-close { 3705 | cursor:pointer 3706 | } 3707 | .modal .modal-footer { 3708 | border-radius:0 0 2px 2px; 3709 | background-color:#fafafa; 3710 | padding:4px 6px; 3711 | height:56px; 3712 | width:100% 3713 | } 3714 | .modal .modal-footer .btn,.modal .modal-footer .btn-flat,.modal .modal-footer .btn-large { 3715 | float:right; 3716 | margin:6px 0 3717 | } 3718 | 3719 | .result{ 3720 | height:202px; 3721 | width:235px; 3722 | background:#dcdcdc; 3723 | float:left; 3724 | margin: 35px auto auto 20px; 3725 | /* margin-left: 10%; 3726 | *//* margin-right: 30%;*/ 3727 | /*float: left;*/ 3728 | border: 1px solid #6793ce; 3729 | /* text-align: center;*/ 3730 | display: inline-block 3731 | } 3732 | 3733 | .digit{ 3734 | font-size:90px; 3735 | } 3736 | 3737 | #button{ 3738 | margin-left: auto; 3739 | margin-right: auto; 3740 | margin-top: 3%; 3741 | margin-bottom: 3%; 3742 | } 3743 | 3744 | .lean-overlay { 3745 | z-index:999; 3746 | top:-100px; 3747 | bottom:0; 3748 | height:125%; 3749 | width:100%; 3750 | background:#000; 3751 | will-change:opacity 3752 | } 3753 | .modal.modal-fixed-footer { 3754 | padding:0; 3755 | height:70% 3756 | } 3757 | .modal.modal-fixed-footer .modal-content { 3758 | position:absolute; 3759 | height:calc(100% - 56px); 3760 | max-height:100%; 3761 | width:100%; 3762 | overflow-y:auto 3763 | } 3764 | .modal.modal-fixed-footer .modal-footer { 3765 | border-top:1px solid rgba(0,0,0,.1); 3766 | position:absolute; 3767 | bottom:0 3768 | } 3769 | .modal.bottom-sheet { 3770 | top:auto; 3771 | bottom:-100%; 3772 | margin:0; 3773 | width:100%; 3774 | max-height:45%; 3775 | border-radius:0; 3776 | will-change:bottom,opacity 3777 | } 3778 | .collapsible { 3779 | border-top:1px solid #ddd; 3780 | border-right:1px solid #ddd; 3781 | border-left:1px solid #ddd; 3782 | margin:.5rem 0 1rem 3783 | } 3784 | .collapsible-header { 3785 | display:block; 3786 | cursor:pointer; 3787 | min-height:3rem; 3788 | line-height:3rem; 3789 | padding:0 1rem; 3790 | background-color:#fff; 3791 | border-bottom:1px solid #ddd 3792 | } 3793 | .collapsible-header i { 3794 | width:2rem; 3795 | font-size:1.6rem; 3796 | line-height:3rem; 3797 | display:block; 3798 | float:left; 3799 | text-align:center; 3800 | margin-right:1rem 3801 | } 3802 | .collapsible-body { 3803 | display:none; 3804 | border-bottom:1px solid #ddd 3805 | } 3806 | .collapsible-body p { 3807 | margin:0; 3808 | padding:2rem 3809 | } 3810 | .side-nav .collapsible,.side-nav.fixed .collapsible { 3811 | border:none; 3812 | box-shadow:none 3813 | } 3814 | .side-nav .collapsible li,.side-nav.fixed .collapsible li { 3815 | padding:0 3816 | } 3817 | .side-nav .collapsible-header,.side-nav.fixed .collapsible-header { 3818 | background-color:transparent; 3819 | border:none; 3820 | line-height:inherit; 3821 | height:inherit; 3822 | padding:0 30px 3823 | } 3824 | .side-nav .collapsible-header:hover,.side-nav.fixed .collapsible-header:hover { 3825 | background-color:rgba(0,0,0,.05) 3826 | } 3827 | .side-nav .collapsible-header i,.side-nav.fixed .collapsible-header i { 3828 | line-height:inherit 3829 | } 3830 | .side-nav .collapsible-body,.side-nav.fixed .collapsible-body { 3831 | border:0; 3832 | background-color:#fff 3833 | } 3834 | .side-nav .collapsible-body li a,.side-nav.fixed .collapsible-body li a { 3835 | padding:0 37.5px 0 45px 3836 | } 3837 | .collapsible.popout { 3838 | border:none; 3839 | box-shadow:none 3840 | } 3841 | .collapsible.popout>li { 3842 | box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); 3843 | margin:0 24px; 3844 | transition:margin .35s cubic-bezier(.25,.46,.45,.94) 3845 | } 3846 | .collapsible.popout>li.active { 3847 | box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); 3848 | margin:16px 0 3849 | } 3850 | .materialboxed { 3851 | display:block; 3852 | cursor:zoom-in; 3853 | position:relative; 3854 | transition:opacity .4s 3855 | } 3856 | .materialboxed:hover { 3857 | will-change:left,top,width,height 3858 | } 3859 | .materialboxed:hover:not(.active) { 3860 | opacity:.8 3861 | } 3862 | .materialboxed.active { 3863 | cursor:zoom-out 3864 | } 3865 | #materialbox-overlay { 3866 | position:fixed; 3867 | top:0; 3868 | left:0; 3869 | right:0; 3870 | bottom:0; 3871 | background-color:#292929; 3872 | z-index:1000; 3873 | will-change:opacity 3874 | } 3875 | .materialbox-caption { 3876 | position:fixed; 3877 | display:none; 3878 | color:#fff; 3879 | line-height:50px; 3880 | bottom:0; 3881 | width:100%; 3882 | text-align:center; 3883 | padding:0 15%; 3884 | height:50px; 3885 | z-index:1000 3886 | } 3887 | select:focus { 3888 | outline:#c9f3ef solid 1px 3889 | } 3890 | button:focus { 3891 | outline:0; 3892 | background-color:#2ab7a9 3893 | } 3894 | label { 3895 | font-size:.8rem; 3896 | color:#9e9e9e 3897 | } 3898 | ::-webkit-input-placeholder { 3899 | color:#d1d1d1 3900 | } 3901 | :-moz-placeholder { 3902 | color:#d1d1d1 3903 | } 3904 | ::-moz-placeholder { 3905 | color:#d1d1d1 3906 | } 3907 | :-ms-input-placeholder { 3908 | color:#d1d1d1 3909 | } 3910 | input:not([type]),input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],textarea.materialize-textarea { 3911 | background-color:transparent; 3912 | border:none; 3913 | border-bottom:1px solid #9e9e9e; 3914 | border-radius:0; 3915 | outline:0; 3916 | height:3rem; 3917 | width:100%; 3918 | font-size:1rem; 3919 | margin:0 0 15px; 3920 | padding:0; 3921 | box-shadow:none; 3922 | box-sizing:content-box; 3923 | transition:all .3s 3924 | } 3925 | input:not([type]):disabled,input:not([type])[readonly=readonly],input[type=date]:disabled,input[type=date][readonly=readonly],input[type=datetime-local]:disabled,input[type=datetime-local][readonly=readonly],input[type=datetime]:disabled,input[type=datetime][readonly=readonly],input[type=email]:disabled,input[type=email][readonly=readonly],input[type=number]:disabled,input[type=number][readonly=readonly],input[type=password]:disabled,input[type=password][readonly=readonly],input[type=search]:disabled,input[type=search][readonly=readonly],input[type=tel]:disabled,input[type=tel][readonly=readonly],input[type=text]:disabled,input[type=text][readonly=readonly],input[type=time]:disabled,input[type=time][readonly=readonly],input[type=url]:disabled,input[type=url][readonly=readonly],textarea.materialize-textarea:disabled,textarea.materialize-textarea[readonly=readonly] { 3926 | color:rgba(0,0,0,.26); 3927 | border-bottom:1px dotted rgba(0,0,0,.26) 3928 | } 3929 | input:not([type]):disabled+label,input:not([type])[readonly=readonly]+label,input[type=date]:disabled+label,input[type=date][readonly=readonly]+label,input[type=datetime-local]:disabled+label,input[type=datetime-local][readonly=readonly]+label,input[type=datetime]:disabled+label,input[type=datetime][readonly=readonly]+label,input[type=email]:disabled+label,input[type=email][readonly=readonly]+label,input[type=number]:disabled+label,input[type=number][readonly=readonly]+label,input[type=password]:disabled+label,input[type=password][readonly=readonly]+label,input[type=search]:disabled+label,input[type=search][readonly=readonly]+label,input[type=tel]:disabled+label,input[type=tel][readonly=readonly]+label,input[type=text]:disabled+label,input[type=text][readonly=readonly]+label,input[type=time]:disabled+label,input[type=time][readonly=readonly]+label,input[type=url]:disabled+label,input[type=url][readonly=readonly]+label,textarea.materialize-textarea:disabled+label,textarea.materialize-textarea[readonly=readonly]+label { 3930 | color:rgba(0,0,0,.26) 3931 | } 3932 | input:not([type]):focus:not([readonly]),input[type=date]:focus:not([readonly]),input[type=datetime-local]:focus:not([readonly]),input[type=datetime]:focus:not([readonly]),input[type=email]:focus:not([readonly]),input[type=number]:focus:not([readonly]),input[type=password]:focus:not([readonly]),input[type=search]:focus:not([readonly]),input[type=tel]:focus:not([readonly]),input[type=text]:focus:not([readonly]),input[type=time]:focus:not([readonly]),input[type=url]:focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]) { 3933 | border-bottom:1px solid #26a69a; 3934 | box-shadow:0 1px 0 0 #26a69a 3935 | } 3936 | input:not([type]):focus:not([readonly])+label,input[type=date]:focus:not([readonly])+label,input[type=datetime-local]:focus:not([readonly])+label,input[type=datetime]:focus:not([readonly])+label,input[type=email]:focus:not([readonly])+label,input[type=number]:focus:not([readonly])+label,input[type=password]:focus:not([readonly])+label,input[type=search]:focus:not([readonly])+label,input[type=tel]:focus:not([readonly])+label,input[type=text]:focus:not([readonly])+label,input[type=time]:focus:not([readonly])+label,input[type=url]:focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label { 3937 | color:#26a69a 3938 | } 3939 | input:not([type]).valid,input:not([type]):focus.valid,input[type=date].valid,input[type=date]:focus.valid,input[type=datetime-local].valid,input[type=datetime-local]:focus.valid,input[type=datetime].valid,input[type=datetime]:focus.valid,input[type=email].valid,input[type=email]:focus.valid,input[type=number].valid,input[type=number]:focus.valid,input[type=password].valid,input[type=password]:focus.valid,input[type=search].valid,input[type=search]:focus.valid,input[type=tel].valid,input[type=tel]:focus.valid,input[type=text].valid,input[type=text]:focus.valid,input[type=time].valid,input[type=time]:focus.valid,input[type=url].valid,input[type=url]:focus.valid,textarea.materialize-textarea.valid,textarea.materialize-textarea:focus.valid { 3940 | border-bottom:1px solid #4CAF50; 3941 | box-shadow:0 1px 0 0 #4CAF50 3942 | } 3943 | input:not([type]).valid+label:after,input:not([type]):focus.valid+label:after,input[type=date].valid+label:after,input[type=date]:focus.valid+label:after,input[type=datetime-local].valid+label:after,input[type=datetime-local]:focus.valid+label:after,input[type=datetime].valid+label:after,input[type=datetime]:focus.valid+label:after,input[type=email].valid+label:after,input[type=email]:focus.valid+label:after,input[type=number].valid+label:after,input[type=number]:focus.valid+label:after,input[type=password].valid+label:after,input[type=password]:focus.valid+label:after,input[type=search].valid+label:after,input[type=search]:focus.valid+label:after,input[type=tel].valid+label:after,input[type=tel]:focus.valid+label:after,input[type=text].valid+label:after,input[type=text]:focus.valid+label:after,input[type=time].valid+label:after,input[type=time]:focus.valid+label:after,input[type=url].valid+label:after,input[type=url]:focus.valid+label:after,textarea.materialize-textarea.valid+label:after,textarea.materialize-textarea:focus.valid+label:after { 3944 | content:attr(data-success); 3945 | color:#4CAF50; 3946 | opacity:1 3947 | } 3948 | input:not([type]).invalid,input:not([type]):focus.invalid,input[type=date].invalid,input[type=date]:focus.invalid,input[type=datetime-local].invalid,input[type=datetime-local]:focus.invalid,input[type=datetime].invalid,input[type=datetime]:focus.invalid,input[type=email].invalid,input[type=email]:focus.invalid,input[type=number].invalid,input[type=number]:focus.invalid,input[type=password].invalid,input[type=password]:focus.invalid,input[type=search].invalid,input[type=search]:focus.invalid,input[type=tel].invalid,input[type=tel]:focus.invalid,input[type=text].invalid,input[type=text]:focus.invalid,input[type=time].invalid,input[type=time]:focus.invalid,input[type=url].invalid,input[type=url]:focus.invalid,textarea.materialize-textarea.invalid,textarea.materialize-textarea:focus.invalid { 3949 | border-bottom:1px solid #F44336; 3950 | box-shadow:0 1px 0 0 #F44336 3951 | } 3952 | input:not([type]).invalid+label:after,input:not([type]):focus.invalid+label:after,input[type=date].invalid+label:after,input[type=date]:focus.invalid+label:after,input[type=datetime-local].invalid+label:after,input[type=datetime-local]:focus.invalid+label:after,input[type=datetime].invalid+label:after,input[type=datetime]:focus.invalid+label:after,input[type=email].invalid+label:after,input[type=email]:focus.invalid+label:after,input[type=number].invalid+label:after,input[type=number]:focus.invalid+label:after,input[type=password].invalid+label:after,input[type=password]:focus.invalid+label:after,input[type=search].invalid+label:after,input[type=search]:focus.invalid+label:after,input[type=tel].invalid+label:after,input[type=tel]:focus.invalid+label:after,input[type=text].invalid+label:after,input[type=text]:focus.invalid+label:after,input[type=time].invalid+label:after,input[type=time]:focus.invalid+label:after,input[type=url].invalid+label:after,input[type=url]:focus.invalid+label:after,textarea.materialize-textarea.invalid+label:after,textarea.materialize-textarea:focus.invalid+label:after { 3953 | content:attr(data-error); 3954 | color:#F44336; 3955 | opacity:1 3956 | } 3957 | input:not([type]).validate+label,input[type=date].validate+label,input[type=datetime-local].validate+label,input[type=datetime].validate+label,input[type=email].validate+label,input[type=number].validate+label,input[type=password].validate+label,input[type=search].validate+label,input[type=tel].validate+label,input[type=text].validate+label,input[type=time].validate+label,input[type=url].validate+label,textarea.materialize-textarea.validate+label { 3958 | width:100%; 3959 | pointer-events:none 3960 | } 3961 | input:not([type])+label:after,input[type=date]+label:after,input[type=datetime-local]+label:after,input[type=datetime]+label:after,input[type=email]+label:after,input[type=number]+label:after,input[type=password]+label:after,input[type=search]+label:after,input[type=tel]+label:after,input[type=text]+label:after,input[type=time]+label:after,input[type=url]+label:after,textarea.materialize-textarea+label:after { 3962 | display:block; 3963 | content:""; 3964 | position:absolute; 3965 | top:65px; 3966 | opacity:0; 3967 | transition:.2s opacity ease-out,.2s color ease-out 3968 | } 3969 | .input-field { 3970 | position:relative; 3971 | margin-top:1rem 3972 | } 3973 | .input-field label { 3974 | color:#9e9e9e; 3975 | position:absolute; 3976 | top:.8rem; 3977 | left:.75rem; 3978 | font-size:1rem; 3979 | cursor:text; 3980 | transition:.2s ease-out 3981 | } 3982 | .input-field label.active { 3983 | font-size:.8rem; 3984 | transform:translateY(-140%) 3985 | } 3986 | .input-field .prefix { 3987 | position:absolute; 3988 | width:3rem; 3989 | font-size:2rem; 3990 | transition:color .2s 3991 | } 3992 | .input-field .prefix.active { 3993 | color:#26a69a 3994 | } 3995 | .input-field .prefix~input,.input-field .prefix~textarea { 3996 | margin-left:3rem; 3997 | width:92%; 3998 | width:calc(100% - 3rem) 3999 | } 4000 | .input-field .prefix~textarea { 4001 | padding-top:.8rem 4002 | } 4003 | .input-field .prefix~label { 4004 | margin-left:3rem 4005 | } 4006 | @media only screen and (max-width:992px) { 4007 | .input-field .prefix~input { 4008 | width:86%; 4009 | width:calc(100% - 3rem) 4010 | } 4011 | } 4012 | @media only screen and (max-width:600px) { 4013 | .input-field .prefix~input { 4014 | width:80%; 4015 | width:calc(100% - 3rem) 4016 | } 4017 | } 4018 | .input-field input[type=search] { 4019 | display:block; 4020 | line-height:inherit; 4021 | padding-left:4rem; 4022 | width:calc(100% - 4rem) 4023 | } 4024 | .input-field input[type=search]:focus { 4025 | background-color:#fff; 4026 | border:0; 4027 | box-shadow:none; 4028 | color:#444 4029 | } 4030 | .input-field input[type=search]:focus+label i,.input-field input[type=search]:focus~.material-icons,.input-field input[type=search]:focus~.mdi-navigation-close { 4031 | color:#444 4032 | } 4033 | .input-field input[type=search]+label { 4034 | left:1rem 4035 | } 4036 | .input-field input[type=search]~.material-icons,.input-field input[type=search]~.mdi-navigation-close { 4037 | position:absolute; 4038 | top:0; 4039 | right:1rem; 4040 | color:transparent; 4041 | cursor:pointer; 4042 | font-size:2rem; 4043 | transition:.3s color 4044 | } 4045 | textarea { 4046 | width:100%; 4047 | height:3rem; 4048 | background-color:transparent 4049 | } 4050 | textarea.materialize-textarea { 4051 | overflow-y:hidden; 4052 | padding:1.6rem 0; 4053 | resize:none; 4054 | min-height:3rem 4055 | } 4056 | .hiddendiv { 4057 | display:none; 4058 | white-space:pre-wrap; 4059 | word-wrap:break-word; 4060 | overflow-wrap:break-word; 4061 | padding-top:1.2rem 4062 | } 4063 | [type=radio]:checked,[type=radio]:not(:checked) { 4064 | position:absolute; 4065 | left:-9999px; 4066 | opacity:0 4067 | } 4068 | [type=radio]:checked+label,[type=radio]:not(:checked)+label { 4069 | position:relative; 4070 | padding-left:35px; 4071 | cursor:pointer; 4072 | display:inline-block; 4073 | height:25px; 4074 | line-height:25px; 4075 | font-size:1rem; 4076 | transition:.28s ease; 4077 | -khtml-user-select:none; 4078 | user-select:none 4079 | } 4080 | .picker,.select-wrapper input.select-dropdown:disabled,.switch,.switch *,[type=checkbox]+label { 4081 | -webkit-user-select:none; 4082 | -moz-user-select:none; 4083 | -ms-user-select:none 4084 | } 4085 | [type=radio]+label:after,[type=radio]+label:before { 4086 | content:''; 4087 | position:absolute; 4088 | left:0; 4089 | top:0; 4090 | margin:4px; 4091 | width:16px; 4092 | height:16px; 4093 | z-index:0; 4094 | transition:.28s ease 4095 | } 4096 | [type=radio].with-gap:checked+label:after,[type=radio].with-gap:checked+label:before,[type=radio]:checked+label:after,[type=radio]:checked+label:before,[type=radio]:not(:checked)+label:after,[type=radio]:not(:checked)+label:before { 4097 | border-radius:50% 4098 | } 4099 | [type=radio]:not(:checked)+label:after,[type=radio]:not(:checked)+label:before { 4100 | border:2px solid #5a5a5a 4101 | } 4102 | [type=radio]:not(:checked)+label:after { 4103 | z-index:-1; 4104 | transform:scale(0) 4105 | } 4106 | [type=radio]:checked+label:before { 4107 | border:2px solid transparent 4108 | } 4109 | [type=radio].with-gap:checked+label:after,[type=radio].with-gap:checked+label:before,[type=radio]:checked+label:after { 4110 | border:2px solid #26a69a 4111 | } 4112 | [type=radio].with-gap:checked+label:after,[type=radio]:checked+label:after { 4113 | background-color:#26a69a; 4114 | z-index:0 4115 | } 4116 | [type=radio]:checked+label:after { 4117 | transform:scale(1.02) 4118 | } 4119 | [type=radio].with-gap:checked+label:after { 4120 | transform:scale(.5) 4121 | } 4122 | [type=radio].tabbed:focus+label:before { 4123 | box-shadow:0 0 0 10px rgba(0,0,0,.1) 4124 | } 4125 | [type=radio].with-gap:disabled:checked+label:before { 4126 | border:2px solid rgba(0,0,0,.26) 4127 | } 4128 | [type=radio].with-gap:disabled:checked+label:after { 4129 | border:none; 4130 | background-color:rgba(0,0,0,.26) 4131 | } 4132 | [type=radio]:disabled:checked+label:before,[type=radio]:disabled:not(:checked)+label:before { 4133 | background-color:transparent; 4134 | border-color:rgba(0,0,0,.26) 4135 | } 4136 | [type=radio]:disabled+label { 4137 | color:rgba(0,0,0,.26) 4138 | } 4139 | [type=radio]:disabled:not(:checked)+label:before { 4140 | border-color:rgba(0,0,0,.26) 4141 | } 4142 | [type=radio]:disabled:checked+label:after { 4143 | background-color:rgba(0,0,0,.26); 4144 | border-color:#BDBDBD 4145 | } 4146 | form p { 4147 | margin-bottom:10px; 4148 | text-align:left 4149 | } 4150 | form p:last-child { 4151 | margin-bottom:0 4152 | } 4153 | [type=checkbox]:checked,[type=checkbox]:not(:checked) { 4154 | position:absolute; 4155 | left:-9999px; 4156 | opacity:0 4157 | } 4158 | [type=checkbox]+label { 4159 | position:relative; 4160 | padding-left:35px; 4161 | cursor:pointer; 4162 | display:inline-block; 4163 | height:25px; 4164 | line-height:25px; 4165 | font-size:1rem; 4166 | -khtml-user-select:none 4167 | } 4168 | [type=checkbox]+label:before,[type=checkbox]:not(.filled-in)+label:after { 4169 | content:''; 4170 | position:absolute; 4171 | top:0; 4172 | left:0; 4173 | width:18px; 4174 | height:18px; 4175 | z-index:0; 4176 | border:2px solid #5a5a5a; 4177 | border-radius:1px; 4178 | margin-top:2px; 4179 | transition:.2s 4180 | } 4181 | [type=checkbox]:not(.filled-in)+label:after { 4182 | border:0; 4183 | transform:scale(0) 4184 | } 4185 | [type=checkbox]:not(:checked):disabled+label:before { 4186 | border:none; 4187 | background-color:rgba(0,0,0,.26) 4188 | } 4189 | [type=checkbox].tabbed:focus+label:after { 4190 | transform:scale(1); 4191 | border:0; 4192 | border-radius:50%; 4193 | box-shadow:0 0 0 10px rgba(0,0,0,.1); 4194 | background-color:rgba(0,0,0,.1) 4195 | } 4196 | [type=checkbox]:checked+label:before { 4197 | top:-4px; 4198 | left:-5px; 4199 | width:12px; 4200 | height:22px; 4201 | border-top:2px solid transparent; 4202 | border-left:2px solid transparent; 4203 | border-right:2px solid #26a69a; 4204 | border-bottom:2px solid #26a69a; 4205 | transform:rotate(40deg); 4206 | backface-visibility:hidden; 4207 | transform-origin:100% 100% 4208 | } 4209 | [type=checkbox]:checked:disabled+label:before { 4210 | border-right:2px solid rgba(0,0,0,.26); 4211 | border-bottom:2px solid rgba(0,0,0,.26) 4212 | } 4213 | [type=checkbox]:indeterminate+label:before { 4214 | top:-11px; 4215 | left:-12px; 4216 | width:10px; 4217 | height:22px; 4218 | border-top:none; 4219 | border-left:none; 4220 | border-right:2px solid #26a69a; 4221 | border-bottom:none; 4222 | transform:rotate(90deg); 4223 | backface-visibility:hidden; 4224 | transform-origin:100% 100% 4225 | } 4226 | [type=checkbox]:indeterminate:disabled+label:before { 4227 | border-right:2px solid rgba(0,0,0,.26); 4228 | background-color:transparent 4229 | } 4230 | [type=checkbox].filled-in+label:after { 4231 | border-radius:2px 4232 | } 4233 | [type=checkbox].filled-in+label:after,[type=checkbox].filled-in+label:before { 4234 | content:''; 4235 | left:0; 4236 | position:absolute; 4237 | transition:border .25s,background-color .25s,width .2s .1s,height .2s .1s,top .2s .1s,left .2s .1s; 4238 | z-index:1 4239 | } 4240 | .switch label .lever,.switch label .lever:after { 4241 | content:""; 4242 | display:inline-block 4243 | } 4244 | [type=checkbox].filled-in:not(:checked)+label:before { 4245 | width:0; 4246 | height:0; 4247 | border:3px solid transparent; 4248 | left:6px; 4249 | top:10px; 4250 | -webkit-transform:rotateZ(37deg); 4251 | transform:rotateZ(37deg); 4252 | -webkit-transform-origin:20% 40%; 4253 | transform-origin:100% 100% 4254 | } 4255 | [type=checkbox].filled-in:not(:checked)+label:after { 4256 | height:20px; 4257 | width:20px; 4258 | background-color:transparent; 4259 | border:2px solid #5a5a5a; 4260 | top:0; 4261 | z-index:0 4262 | } 4263 | [type=checkbox].filled-in:checked+label:before { 4264 | top:0; 4265 | left:1px; 4266 | width:8px; 4267 | height:13px; 4268 | border-top:2px solid transparent; 4269 | border-left:2px solid transparent; 4270 | border-right:2px solid #fff; 4271 | border-bottom:2px solid #fff; 4272 | -webkit-transform:rotateZ(37deg); 4273 | transform:rotateZ(37deg); 4274 | -webkit-transform-origin:100% 100%; 4275 | transform-origin:100% 100% 4276 | } 4277 | [type=checkbox].filled-in:checked+label:after { 4278 | top:0; 4279 | width:20px; 4280 | height:20px; 4281 | border:2px solid #fbc02d; 4282 | background-color:#fbc02d; 4283 | z-index:0 4284 | } 4285 | [type=checkbox].filled-in.tabbed:focus+label:after { 4286 | border-radius:2px; 4287 | border-color:#5a5a5a; 4288 | background-color:rgba(0,0,0,.1) 4289 | } 4290 | [type=checkbox].filled-in.tabbed:checked:focus+label:after { 4291 | border-radius:2px; 4292 | background-color:#fbc02d; 4293 | border-color:#fbc02d 4294 | } 4295 | [type=checkbox].filled-in:disabled:not(:checked)+label:before { 4296 | background-color:transparent; 4297 | border:2px solid transparent 4298 | } 4299 | [type=checkbox].filled-in:disabled:not(:checked)+label:after { 4300 | border-color:transparent; 4301 | background-color:#BDBDBD 4302 | } 4303 | [type=checkbox].filled-in:disabled:checked+label:before { 4304 | background-color:transparent 4305 | } 4306 | [type=checkbox].filled-in:disabled:checked+label:after { 4307 | background-color:#BDBDBD; 4308 | border-color:#BDBDBD 4309 | } 4310 | .switch,.switch * { 4311 | -khtml-user-select:none 4312 | } 4313 | .switch label { 4314 | cursor:pointer 4315 | } 4316 | .switch label input[type=checkbox] { 4317 | opacity:0; 4318 | width:0; 4319 | height:0 4320 | } 4321 | .switch label input[type=checkbox]:checked+.lever { 4322 | background-color:#84c7c1 4323 | } 4324 | .switch label input[type=checkbox]:checked+.lever:after { 4325 | background-color:#26a69a; 4326 | left:24px 4327 | } 4328 | .switch label .lever { 4329 | position:relative; 4330 | width:40px; 4331 | height:15px; 4332 | background-color:#818181; 4333 | border-radius:15px; 4334 | transition:background .3s ease; 4335 | vertical-align:middle; 4336 | margin:0 16px 4337 | } 4338 | .switch label .lever:after { 4339 | position:absolute; 4340 | width:21px; 4341 | height:21px; 4342 | background-color:#F1F1F1; 4343 | border-radius:21px; 4344 | box-shadow:0 1px 3px 1px rgba(0,0,0,.4); 4345 | left:-5px; 4346 | top:-3px; 4347 | transition:left .3s ease,background .3s ease,box-shadow .1s ease 4348 | } 4349 | input[type=checkbox]:checked:not(:disabled).tabbed:focus~.lever::after,input[type=checkbox]:checked:not(:disabled)~.lever:active::after { 4350 | box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(38,166,154,.1) 4351 | } 4352 | input[type=checkbox]:not(:disabled).tabbed:focus~.lever::after,input[type=checkbox]:not(:disabled)~.lever:active:after { 4353 | box-shadow:0 1px 3px 1px rgba(0,0,0,.4),0 0 0 15px rgba(0,0,0,.08) 4354 | } 4355 | .switch input[type=checkbox][disabled]+.lever { 4356 | cursor:default 4357 | } 4358 | .switch label input[type=checkbox][disabled]+.lever:after,.switch label input[type=checkbox][disabled]:checked+.lever:after { 4359 | background-color:#BDBDBD 4360 | } 4361 | select { 4362 | display:none; 4363 | background-color:rgba(255,255,255,.9); 4364 | width:100%; 4365 | padding:5px; 4366 | border:1px solid #f2f2f2; 4367 | border-radius:2px; 4368 | height:3rem 4369 | } 4370 | select.browser-default { 4371 | display:block 4372 | } 4373 | .select-label { 4374 | position:absolute 4375 | } 4376 | .select-wrapper { 4377 | position:relative 4378 | } 4379 | .select-wrapper input.select-dropdown { 4380 | position:relative; 4381 | cursor:pointer; 4382 | background-color:transparent; 4383 | border:none; 4384 | border-bottom:1px solid #9e9e9e; 4385 | outline:0; 4386 | height:3rem; 4387 | line-height:3rem; 4388 | width:100%; 4389 | font-size:1rem; 4390 | margin:0 0 15px; 4391 | padding:0; 4392 | display:block 4393 | } 4394 | .select-wrapper span.caret { 4395 | color:initial; 4396 | position:absolute; 4397 | right:0; 4398 | top:16px; 4399 | font-size:10px 4400 | } 4401 | .select-wrapper span.caret.disabled { 4402 | color:rgba(0,0,0,.26) 4403 | } 4404 | .select-wrapper+label { 4405 | position:absolute; 4406 | top:-14px; 4407 | font-size:.8rem 4408 | } 4409 | select:disabled { 4410 | color:rgba(0,0,0,.3) 4411 | } 4412 | .select-wrapper input.select-dropdown:disabled { 4413 | color:rgba(0,0,0,.3); 4414 | cursor:default; 4415 | border-bottom:1px solid rgba(0,0,0,.3) 4416 | } 4417 | .file-field input[type=file],.file-field span,input[type=range],input[type=range]+.thumb { 4418 | cursor:pointer 4419 | } 4420 | .select-wrapper i { 4421 | color:rgba(0,0,0,.3) 4422 | } 4423 | .select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup { 4424 | color:rgba(0,0,0,.3); 4425 | background-color:transparent 4426 | } 4427 | .prefix~.select-wrapper { 4428 | margin-left:3rem; 4429 | width:92%; 4430 | width:calc(100% - 3rem) 4431 | } 4432 | .prefix~label { 4433 | margin-left:3rem 4434 | } 4435 | .select-dropdown li img { 4436 | height:40px; 4437 | width:40px; 4438 | margin:5px 15px; 4439 | float:right 4440 | } 4441 | .select-dropdown li.optgroup { 4442 | border-top:1px solid #eee 4443 | } 4444 | .select-dropdown li.optgroup.selected>span { 4445 | color:rgba(0,0,0,.7) 4446 | } 4447 | .select-dropdown li.optgroup>span { 4448 | color:rgba(0,0,0,.4) 4449 | } 4450 | .select-dropdown li.optgroup~li.optgroup-option { 4451 | padding-left:1rem 4452 | } 4453 | .file-field { 4454 | position:relative 4455 | } 4456 | .file-field .file-path-wrapper { 4457 | overflow:hidden; 4458 | padding-left:10px 4459 | } 4460 | .file-field input.file-path { 4461 | width:100% 4462 | } 4463 | .file-field .btn,.file-field .btn-large { 4464 | float:left; 4465 | height:3rem; 4466 | line-height:3rem 4467 | } 4468 | .file-field input[type=file] { 4469 | position:absolute; 4470 | top:0; 4471 | right:0; 4472 | left:0; 4473 | bottom:0; 4474 | width:100%; 4475 | margin:0; 4476 | padding:0; 4477 | font-size:20px; 4478 | opacity:0; 4479 | filter:alpha(opacity=0) 4480 | } 4481 | .range-field,input[type=range] { 4482 | position:relative 4483 | } 4484 | input[type=range] { 4485 | background-color:transparent; 4486 | outline:0; 4487 | width:100%; 4488 | margin:15px 0; 4489 | padding:0 4490 | } 4491 | input[type=range]:focus { 4492 | outline:0 4493 | } 4494 | input[type=range]+.thumb { 4495 | position:absolute; 4496 | border:none; 4497 | height:0; 4498 | width:0; 4499 | border-radius:50%; 4500 | background-color:#26a69a; 4501 | top:10px; 4502 | margin-left:-6px; 4503 | transform-origin:50% 50%; 4504 | transform:rotate(-45deg) 4505 | } 4506 | .drag-target,.side-nav,.side-nav.fixed,.table-of-contents.fixed { 4507 | position:fixed 4508 | } 4509 | input[type=range]+.thumb .value { 4510 | display:block; 4511 | width:30px; 4512 | text-align:center; 4513 | color:#26a69a; 4514 | font-size:0; 4515 | transform:rotate(45deg) 4516 | } 4517 | input[type=range]+.thumb.active { 4518 | border-radius:50% 50% 50% 0 4519 | } 4520 | input[type=range]+.thumb.active .value { 4521 | color:#fff; 4522 | margin-left:-1px; 4523 | margin-top:8px; 4524 | font-size:10px 4525 | } 4526 | input[type=range]::-webkit-slider-runnable-track { 4527 | height:3px; 4528 | background:#c2c0c2; 4529 | border:none 4530 | } 4531 | input[type=range]::-webkit-slider-thumb { 4532 | -webkit-appearance:none; 4533 | border:none; 4534 | height:14px; 4535 | width:14px; 4536 | border-radius:50%; 4537 | background-color:#26a69a; 4538 | transform-origin:50% 50%; 4539 | margin:-5px 0 0; 4540 | transition:.3s 4541 | } 4542 | input[type=range]:focus::-webkit-slider-runnable-track { 4543 | background:#ccc 4544 | } 4545 | input[type=range] { 4546 | -webkit-appearance:none; 4547 | border:1px solid #fff 4548 | } 4549 | input[type=range]::-moz-range-track { 4550 | height:3px; 4551 | background:#ddd; 4552 | border:none 4553 | } 4554 | input[type=range]::-moz-range-thumb { 4555 | border:none; 4556 | height:14px; 4557 | width:14px; 4558 | border-radius:50%; 4559 | background:#26a69a; 4560 | margin-top:-5px 4561 | } 4562 | input[type=range]:-moz-focusring { 4563 | outline:#fff solid 1px; 4564 | outline-offset:-1px 4565 | } 4566 | input[type=range]:focus::-moz-range-track { 4567 | background:#ccc 4568 | } 4569 | input[type=range]::-ms-track { 4570 | height:3px; 4571 | background:0 0; 4572 | border-color:transparent; 4573 | border-width:6px 0; 4574 | color:transparent 4575 | } 4576 | input[type=range]::-ms-fill-lower { 4577 | background:#777 4578 | } 4579 | input[type=range]::-ms-fill-upper { 4580 | background:#ddd 4581 | } 4582 | input[type=range]::-ms-thumb { 4583 | border:none; 4584 | height:14px; 4585 | width:14px; 4586 | border-radius:50%; 4587 | background:#26a69a 4588 | } 4589 | input[type=range]:focus::-ms-fill-lower { 4590 | background:#888 4591 | } 4592 | input[type=range]:focus::-ms-fill-upper { 4593 | background:#ccc 4594 | } 4595 | .table-of-contents li { 4596 | padding:2px 0 4597 | } 4598 | .table-of-contents a { 4599 | font-weight:300; 4600 | color:#757575; 4601 | padding-left:20px; 4602 | height:1.5rem; 4603 | line-height:1.5rem; 4604 | letter-spacing:.4; 4605 | display:inline-block 4606 | } 4607 | .table-of-contents a:hover { 4608 | color:#a8a8a8; 4609 | padding-left:19px; 4610 | border-left:1px solid #ea4a4f 4611 | } 4612 | .table-of-contents a.active { 4613 | font-weight:500; 4614 | padding-left:18px; 4615 | border-left:2px solid #ea4a4f 4616 | } 4617 | .side-nav { 4618 | width:240px; 4619 | left:0; 4620 | top:0; 4621 | margin:0; 4622 | height:100%; 4623 | height:calc(100% + 60px); 4624 | height:-moz-calc(100%); 4625 | padding-bottom:60px; 4626 | background-color:#fff; 4627 | z-index:999; 4628 | overflow-y:auto; 4629 | will-change:transform; 4630 | backface-visibility:hidden; 4631 | transform:translateX(-105%) 4632 | } 4633 | .side-nav a:hover,.side-nav li.active { 4634 | background-color:rgba(0,0,0,.05) 4635 | } 4636 | .side-nav.right-aligned { 4637 | right:0; 4638 | left:auto; 4639 | transform:translateX(100%) 4640 | } 4641 | .side-nav .collapsible { 4642 | margin:0 4643 | } 4644 | .side-nav li { 4645 | float:none; 4646 | line-height:64px 4647 | } 4648 | .side-nav a { 4649 | color:#444; 4650 | display:block; 4651 | font-size:1rem; 4652 | height:64px; 4653 | line-height:64px; 4654 | padding:0 30px 4655 | } 4656 | .side-nav a.btn,.side-nav a.btn-flat,.side-nav a.btn-floating,.side-nav a.btn-large { 4657 | margin:10px 15px 4658 | } 4659 | .side-nav a.btn,.side-nav a.btn-floating,.side-nav a.btn-large { 4660 | color:#fff 4661 | } 4662 | .side-nav a.btn-flat { 4663 | color:#343434 4664 | } 4665 | .side-nav a.btn-large:hover,.side-nav a.btn:hover { 4666 | background-color:#2bbbad 4667 | } 4668 | .side-nav a.btn-floating:hover { 4669 | background-color:#26a69a 4670 | } 4671 | .drag-target { 4672 | height:100%; 4673 | width:10px; 4674 | top:0; 4675 | z-index:998 4676 | } 4677 | .side-nav.fixed a { 4678 | display:block; 4679 | padding:0 30px; 4680 | color:#444 4681 | } 4682 | .side-nav.fixed { 4683 | left:0; 4684 | transform:translateX(0) 4685 | } 4686 | .side-nav.fixed.right-aligned { 4687 | right:0; 4688 | left:auto 4689 | } 4690 | @media only screen and (max-width:992px) { 4691 | .side-nav.fixed { 4692 | transform:translateX(-105%) 4693 | } 4694 | .side-nav.fixed.right-aligned { 4695 | transform:translateX(105%) 4696 | } 4697 | } 4698 | .side-nav .collapsible-body li.active,.side-nav.fixed .collapsible-body li.active { 4699 | background-color:#414B82 4700 | } 4701 | .side-nav .collapsible-body li.active a,.side-nav.fixed .collapsible-body li.active a { 4702 | color:#fff 4703 | } 4704 | #sidenav-overlay { 4705 | position:fixed; 4706 | top:0; 4707 | left:0; 4708 | right:0; 4709 | height:120vh; 4710 | background-color:rgba(0,0,0,.5); 4711 | z-index:997; 4712 | will-change:opacity 4713 | } 4714 | .preloader-wrapper { 4715 | display:inline-block; 4716 | position:relative; 4717 | width:48px; 4718 | height:48px 4719 | } 4720 | .preloader-wrapper.small { 4721 | width:36px; 4722 | height:36px 4723 | } 4724 | .preloader-wrapper.big { 4725 | width:64px; 4726 | height:64px 4727 | } 4728 | .preloader-wrapper.active { 4729 | -webkit-animation:container-rotate 1568ms linear infinite; 4730 | animation:container-rotate 1568ms linear infinite 4731 | } 4732 | @-webkit-keyframes container-rotate { 4733 | to { 4734 | -webkit-transform:rotate(360deg) 4735 | } 4736 | } 4737 | @keyframes container-rotate { 4738 | to { 4739 | transform:rotate(360deg) 4740 | } 4741 | } 4742 | .spinner-layer { 4743 | position:absolute; 4744 | width:100%; 4745 | height:100%; 4746 | opacity:0; 4747 | border-color:#26a69a 4748 | } 4749 | .spinner-blue,.spinner-blue-only { 4750 | border-color:#4285f4 4751 | } 4752 | .spinner-red,.spinner-red-only { 4753 | border-color:#db4437 4754 | } 4755 | .spinner-yellow,.spinner-yellow-only { 4756 | border-color:#f4b400 4757 | } 4758 | .spinner-green,.spinner-green-only { 4759 | border-color:#0f9d58 4760 | } 4761 | .circle-clipper,.circle-clipper .circle,.gap-patch { 4762 | height:100%; 4763 | border-color:inherit 4764 | } 4765 | .active .spinner-layer.spinner-blue { 4766 | -webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,blue-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both; 4767 | animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,blue-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both 4768 | } 4769 | .active .spinner-layer.spinner-red { 4770 | -webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,red-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both; 4771 | animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,red-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both 4772 | } 4773 | .active .spinner-layer.spinner-yellow { 4774 | -webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both; 4775 | animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,yellow-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both 4776 | } 4777 | .active .spinner-layer.spinner-green { 4778 | -webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,green-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both; 4779 | animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,green-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both 4780 | } 4781 | .active .spinner-layer,.active .spinner-layer.spinner-blue-only,.active .spinner-layer.spinner-green-only,.active .spinner-layer.spinner-red-only,.active .spinner-layer.spinner-yellow-only { 4782 | opacity:1; 4783 | -webkit-animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both; 4784 | animation:fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both 4785 | } 4786 | @-webkit-keyframes fill-unfill-rotate { 4787 | 12.5% { 4788 | -webkit-transform:rotate(135deg) 4789 | } 4790 | 25% { 4791 | -webkit-transform:rotate(270deg) 4792 | } 4793 | 37.5% { 4794 | -webkit-transform:rotate(405deg) 4795 | } 4796 | 50% { 4797 | -webkit-transform:rotate(540deg) 4798 | } 4799 | 62.5% { 4800 | -webkit-transform:rotate(675deg) 4801 | } 4802 | 75% { 4803 | -webkit-transform:rotate(810deg) 4804 | } 4805 | 87.5% { 4806 | -webkit-transform:rotate(945deg) 4807 | } 4808 | to { 4809 | -webkit-transform:rotate(1080deg) 4810 | } 4811 | } 4812 | @keyframes fill-unfill-rotate { 4813 | 12.5% { 4814 | transform:rotate(135deg) 4815 | } 4816 | 25% { 4817 | transform:rotate(270deg) 4818 | } 4819 | 37.5% { 4820 | transform:rotate(405deg) 4821 | } 4822 | 50% { 4823 | transform:rotate(540deg) 4824 | } 4825 | 62.5% { 4826 | transform:rotate(675deg) 4827 | } 4828 | 75% { 4829 | transform:rotate(810deg) 4830 | } 4831 | 87.5% { 4832 | transform:rotate(945deg) 4833 | } 4834 | to { 4835 | transform:rotate(1080deg) 4836 | } 4837 | } 4838 | @-webkit-keyframes blue-fade-in-out { 4839 | 100%,25%,90%,from { 4840 | opacity:1 4841 | } 4842 | 26%,89% { 4843 | opacity:0 4844 | } 4845 | } 4846 | @keyframes blue-fade-in-out { 4847 | 100%,25%,90%,from { 4848 | opacity:1 4849 | } 4850 | 26%,89% { 4851 | opacity:0 4852 | } 4853 | } 4854 | @-webkit-keyframes red-fade-in-out { 4855 | 15%,51%,from { 4856 | opacity:0 4857 | } 4858 | 25%,50% { 4859 | opacity:1 4860 | } 4861 | } 4862 | @keyframes red-fade-in-out { 4863 | 15%,51%,from { 4864 | opacity:0 4865 | } 4866 | 25%,50% { 4867 | opacity:1 4868 | } 4869 | } 4870 | @-webkit-keyframes yellow-fade-in-out { 4871 | 40%,76%,from { 4872 | opacity:0 4873 | } 4874 | 50%,75% { 4875 | opacity:1 4876 | } 4877 | } 4878 | @keyframes yellow-fade-in-out { 4879 | 40%,76%,from { 4880 | opacity:0 4881 | } 4882 | 50%,75% { 4883 | opacity:1 4884 | } 4885 | } 4886 | @-webkit-keyframes green-fade-in-out { 4887 | 100%,65%,from { 4888 | opacity:0 4889 | } 4890 | 75%,90% { 4891 | opacity:1 4892 | } 4893 | } 4894 | @keyframes green-fade-in-out { 4895 | 100%,65%,from { 4896 | opacity:0 4897 | } 4898 | 75%,90% { 4899 | opacity:1 4900 | } 4901 | } 4902 | .gap-patch { 4903 | position:absolute; 4904 | top:0; 4905 | left:45%; 4906 | width:10%; 4907 | overflow:hidden 4908 | } 4909 | .gap-patch .circle { 4910 | width:1000%; 4911 | left:-450% 4912 | } 4913 | .circle-clipper { 4914 | display:inline-block; 4915 | position:relative; 4916 | width:50%; 4917 | overflow:hidden 4918 | } 4919 | .circle-clipper .circle { 4920 | width:200%; 4921 | border-width:3px; 4922 | border-style:solid; 4923 | border-bottom-color:transparent!important; 4924 | border-radius:50%; 4925 | -webkit-animation:none; 4926 | animation:none; 4927 | position:absolute; 4928 | top:0; 4929 | right:0; 4930 | bottom:0 4931 | } 4932 | .circle-clipper.left .circle { 4933 | left:0; 4934 | border-right-color:transparent!important; 4935 | -webkit-transform:rotate(129deg); 4936 | transform:rotate(129deg) 4937 | } 4938 | .circle-clipper.right .circle { 4939 | left:-100%; 4940 | border-left-color:transparent!important; 4941 | -webkit-transform:rotate(-129deg); 4942 | transform:rotate(-129deg) 4943 | } 4944 | .active .circle-clipper.left .circle { 4945 | -webkit-animation:left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; 4946 | animation:left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both 4947 | } 4948 | .active .circle-clipper.right .circle { 4949 | -webkit-animation:right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both; 4950 | animation:right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both 4951 | } 4952 | @-webkit-keyframes left-spin { 4953 | from,to { 4954 | -webkit-transform:rotate(130deg) 4955 | } 4956 | 50% { 4957 | -webkit-transform:rotate(-5deg) 4958 | } 4959 | } 4960 | @keyframes left-spin { 4961 | from,to { 4962 | transform:rotate(130deg) 4963 | } 4964 | 50% { 4965 | transform:rotate(-5deg) 4966 | } 4967 | } 4968 | @-webkit-keyframes right-spin { 4969 | from,to { 4970 | -webkit-transform:rotate(-130deg) 4971 | } 4972 | 50% { 4973 | -webkit-transform:rotate(5deg) 4974 | } 4975 | } 4976 | @keyframes right-spin { 4977 | from,to { 4978 | transform:rotate(-130deg) 4979 | } 4980 | 50% { 4981 | transform:rotate(5deg) 4982 | } 4983 | } 4984 | #spinnerContainer.cooldown { 4985 | -webkit-animation:container-rotate 1568ms linear infinite,fade-out .4s cubic-bezier(.4,0,.2,1); 4986 | animation:container-rotate 1568ms linear infinite,fade-out .4s cubic-bezier(.4,0,.2,1) 4987 | } 4988 | @-webkit-keyframes fade-out { 4989 | from { 4990 | opacity:1 4991 | } 4992 | to { 4993 | opacity:0 4994 | } 4995 | } 4996 | @keyframes fade-out { 4997 | from { 4998 | opacity:1 4999 | } 5000 | to { 5001 | opacity:0 5002 | } 5003 | } 5004 | .slider { 5005 | position:relative; 5006 | height:400px; 5007 | width:100% 5008 | } 5009 | .slider.fullscreen { 5010 | height:100%; 5011 | width:100%; 5012 | position:absolute; 5013 | top:0; 5014 | left:0; 5015 | right:0; 5016 | bottom:0 5017 | } 5018 | .slider.fullscreen ul.slides { 5019 | height:100% 5020 | } 5021 | .slider.fullscreen ul.indicators { 5022 | z-index:2; 5023 | bottom:30px 5024 | } 5025 | .slider .slides { 5026 | margin:0; 5027 | height:400px 5028 | } 5029 | .slider .slides li { 5030 | opacity:0; 5031 | position:absolute; 5032 | top:0; 5033 | left:0; 5034 | z-index:1; 5035 | width:100%; 5036 | height:inherit; 5037 | overflow:hidden 5038 | } 5039 | .slider .slides li img { 5040 | height:100%; 5041 | width:100%; 5042 | background-size:cover; 5043 | background-position:center 5044 | } 5045 | .slider .slides li .caption { 5046 | color:#fff; 5047 | position:absolute; 5048 | top:15%; 5049 | left:15%; 5050 | width:70%; 5051 | opacity:0 5052 | } 5053 | .slider .slides li .caption p { 5054 | color:#e0e0e0 5055 | } 5056 | .slider .slides li.active { 5057 | z-index:2 5058 | } 5059 | .slider .indicators { 5060 | position:absolute; 5061 | text-align:center; 5062 | left:0; 5063 | right:0; 5064 | bottom:0; 5065 | margin:0 5066 | } 5067 | .slider .indicators .indicator-item { 5068 | display:inline-block; 5069 | position:relative; 5070 | cursor:pointer; 5071 | height:16px; 5072 | width:16px; 5073 | margin:0 12px; 5074 | background-color:#e0e0e0; 5075 | transition:background-color .3s; 5076 | border-radius:50% 5077 | } 5078 | .picker { 5079 | font-size:16px; 5080 | text-align:left; 5081 | line-height:1.2; 5082 | color:#000; 5083 | position:absolute; 5084 | z-index:10000; 5085 | user-select:none 5086 | } 5087 | .picker__header,.picker__table,.picker__table td,.picker__table th { 5088 | text-align:center 5089 | } 5090 | .picker__input { 5091 | cursor:default 5092 | } 5093 | .picker__holder { 5094 | width:100%; 5095 | overflow-y:auto; 5096 | -webkit-overflow-scrolling:touch; 5097 | position:fixed; 5098 | -webkit-transition:background .15s ease-out,top 0s .15s; 5099 | -moz-transition:background .15s ease-out,top 0s .15s; 5100 | transition:background .15s ease-out,top 0s .15s; 5101 | -webkit-backface-visibility:hidden 5102 | } 5103 | /*! 5104 | * Default mobile-first, responsive styling for pickadate.js 5105 | * Demo: http://amsul.github.io/pickadate.js 5106 | */.picker__frame,.picker__holder { 5107 | bottom:0; 5108 | left:0; 5109 | right:0; 5110 | top:100% 5111 | } 5112 | .picker__frame { 5113 | position:absolute; 5114 | min-width:256px; 5115 | width:300px; 5116 | max-height:350px; 5117 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 5118 | filter:alpha(opacity=0); 5119 | -moz-opacity:0; 5120 | opacity:0; 5121 | -webkit-transition:all .15s ease-out; 5122 | -moz-transition:all .15s ease-out; 5123 | transition:all .15s ease-out 5124 | } 5125 | @media (min-height:40.125em) { 5126 | .picker__frame { 5127 | margin-bottom:7.5% 5128 | } 5129 | } 5130 | .picker__wrap { 5131 | display:table; 5132 | width:100%; 5133 | height:100% 5134 | } 5135 | @media (min-height:28.875em) { 5136 | .picker__frame { 5137 | overflow:visible; 5138 | top:auto; 5139 | bottom:-100%; 5140 | max-height:80% 5141 | } 5142 | .picker__wrap { 5143 | display:block 5144 | } 5145 | } 5146 | .picker__box { 5147 | background:#fff; 5148 | display:table-cell; 5149 | vertical-align:middle 5150 | } 5151 | @media (min-height:28.875em) { 5152 | .picker__box { 5153 | display:block; 5154 | border:1px solid #777; 5155 | border-top-color:#898989; 5156 | border-bottom-width:0; 5157 | -webkit-border-radius:5px 5px 0 0; 5158 | -moz-border-radius:5px 5px 0 0; 5159 | border-radius:5px 5px 0 0; 5160 | -webkit-box-shadow:0 12px 36px 16px rgba(0,0,0,.24); 5161 | -moz-box-shadow:0 12px 36px 16px rgba(0,0,0,.24); 5162 | box-shadow:0 12px 36px 16px rgba(0,0,0,.24) 5163 | } 5164 | } 5165 | .picker--opened .picker__holder { 5166 | top:0; 5167 | zoom:1; 5168 | background:rgba(0,0,0,.32); 5169 | -webkit-transition:background .15s ease-out; 5170 | -moz-transition:background .15s ease-out; 5171 | transition:background .15s ease-out 5172 | } 5173 | .picker--opened .picker__frame { 5174 | top:0; 5175 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 5176 | filter:alpha(opacity=100); 5177 | -moz-opacity:1; 5178 | opacity:1 5179 | } 5180 | @media (min-height:35.875em) { 5181 | .picker--opened .picker__frame { 5182 | top:10%; 5183 | bottom:auto 5184 | } 5185 | } 5186 | .picker__input.picker__input--active { 5187 | border-color:#E3F2FD 5188 | } 5189 | .picker__frame { 5190 | margin:0 auto; 5191 | max-width:325px 5192 | } 5193 | @media (min-height:38.875em) { 5194 | .picker--opened .picker__frame { 5195 | top:10%; 5196 | bottom:auto 5197 | } 5198 | } 5199 | .picker__header { 5200 | position:relative; 5201 | margin-top:.75em 5202 | } 5203 | .picker__month,.picker__year { 5204 | display:inline-block; 5205 | margin-left:.25em; 5206 | margin-right:.25em 5207 | } 5208 | .picker__select--month,.picker__select--year { 5209 | height:2em; 5210 | padding:0; 5211 | margin-left:.25em; 5212 | margin-right:.25em 5213 | } 5214 | .picker__select--month.browser-default { 5215 | display:inline; 5216 | background-color:#FFF; 5217 | width:40% 5218 | } 5219 | .picker__select--year.browser-default { 5220 | display:inline; 5221 | background-color:#FFF; 5222 | width:26% 5223 | } 5224 | .picker__select--month:focus,.picker__select--year:focus { 5225 | border-color:rgba(0,0,0,.05) 5226 | } 5227 | .picker__nav--next,.picker__nav--prev { 5228 | position:absolute; 5229 | padding:.5em 1.25em; 5230 | width:1em; 5231 | height:1em; 5232 | box-sizing:content-box; 5233 | top:-.25em 5234 | } 5235 | .picker__nav--prev { 5236 | left:-1em; 5237 | padding-right:1.25em 5238 | } 5239 | .picker__nav--next { 5240 | right:-1em; 5241 | padding-left:1.25em 5242 | } 5243 | .picker__nav--disabled,.picker__nav--disabled:before,.picker__nav--disabled:before:hover,.picker__nav--disabled:hover { 5244 | cursor:default; 5245 | background:0 0; 5246 | border-right-color:#f5f5f5; 5247 | border-left-color:#f5f5f5 5248 | } 5249 | .picker__table { 5250 | table-layout:fixed; 5251 | font-size:1rem; 5252 | width:100% 5253 | } 5254 | .picker__table td { 5255 | margin:0; 5256 | padding:0 5257 | } 5258 | .picker__weekday { 5259 | width:14.285714286%; 5260 | padding-bottom:.25em; 5261 | color:#999; 5262 | font-weight:500 5263 | } 5264 | @media (min-height:33.875em) { 5265 | .picker__weekday { 5266 | padding-bottom:.5em 5267 | } 5268 | } 5269 | .picker__day--today { 5270 | position:relative; 5271 | color:#595959; 5272 | letter-spacing:-.3; 5273 | padding:.75rem 0; 5274 | font-weight:400; 5275 | border:1px solid transparent 5276 | } 5277 | .picker__day--disabled:before { 5278 | border-top-color:#aaa 5279 | } 5280 | .picker__day--infocus:hover { 5281 | cursor:pointer; 5282 | color:#000; 5283 | font-weight:500 5284 | } 5285 | .picker__day--outfocus { 5286 | display:none; 5287 | padding:.75rem 0; 5288 | color:#fff 5289 | } 5290 | .picker__day--outfocus:hover { 5291 | cursor:pointer; 5292 | color:#ddd; 5293 | font-weight:500 5294 | } 5295 | .picker--focused .picker__day--highlighted,.picker__day--highlighted:hover { 5296 | cursor:pointer 5297 | } 5298 | .picker--focused .picker__day--selected,.picker__day--selected,.picker__day--selected:hover { 5299 | background:#0089ec 5300 | } 5301 | .picker--focused .picker__day--disabled,.picker__day--disabled,.picker__day--disabled:hover { 5302 | background:#f5f5f5; 5303 | border-color:#f5f5f5; 5304 | color:#ddd; 5305 | cursor:default 5306 | } 5307 | .picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover { 5308 | background:#bbb 5309 | } 5310 | .picker__footer { 5311 | display:flex; 5312 | align-items:center; 5313 | justify-content:space-between 5314 | } 5315 | .picker__button--clear,.picker__button--close,.picker__button--today { 5316 | border:1px solid #fff; 5317 | background:#fff; 5318 | font-size:.8em; 5319 | padding:.66em 0; 5320 | font-weight:700; 5321 | width:33%; 5322 | display:inline-block; 5323 | vertical-align:bottom 5324 | } 5325 | .picker__button--clear:hover,.picker__button--close:hover,.picker__button--today:hover { 5326 | cursor:pointer; 5327 | color:#000; 5328 | background:#b1dcfb; 5329 | border-bottom-color:#b1dcfb 5330 | } 5331 | .picker__button--clear:focus,.picker__button--close:focus,.picker__button--today:focus { 5332 | background:#b1dcfb; 5333 | border-color:rgba(0,0,0,.05); 5334 | outline:0 5335 | } 5336 | .picker__button--clear:before,.picker__button--close:before,.picker__button--today:before { 5337 | position:relative; 5338 | display:inline-block; 5339 | height:0 5340 | } 5341 | .picker__button--clear:before,.picker__button--today:before { 5342 | content:" "; 5343 | margin-right:.45em 5344 | } 5345 | .picker__button--today:before { 5346 | top:-.05em; 5347 | width:0; 5348 | border-top:.66em solid #0059bc; 5349 | border-left:.66em solid transparent 5350 | } 5351 | .picker__button--clear:before { 5352 | top:-.25em; 5353 | width:.66em; 5354 | border-top:3px solid #e20 5355 | } 5356 | .picker__button--close:before { 5357 | content:"\D7"; 5358 | top:-.1em; 5359 | vertical-align:top; 5360 | font-size:1.1em; 5361 | margin-right:.35em; 5362 | color:#777 5363 | } 5364 | .picker__button--today[disabled],.picker__button--today[disabled]:hover { 5365 | background:#f5f5f5; 5366 | border-color:#f5f5f5; 5367 | color:#ddd; 5368 | cursor:default 5369 | } 5370 | .picker__button--today[disabled]:before { 5371 | border-top-color:#aaa 5372 | } 5373 | .picker__date-display { 5374 | text-align:center; 5375 | background-color:#26a69a; 5376 | color:#fff; 5377 | padding-bottom:15px; 5378 | font-weight:300 5379 | } 5380 | .picker__nav--next:hover,.picker__nav--prev:hover { 5381 | cursor:pointer; 5382 | color:#000; 5383 | background:#a1ded8 5384 | } 5385 | .picker__weekday-display { 5386 | background-color:#1f897f; 5387 | padding:10px; 5388 | font-weight:200; 5389 | letter-spacing:.5; 5390 | font-size:1rem; 5391 | margin-bottom:15px 5392 | } 5393 | .picker__month-display { 5394 | text-transform:uppercase; 5395 | font-size:2rem 5396 | } 5397 | .picker__day-display { 5398 | font-size:4.5rem; 5399 | font-weight:400 5400 | } 5401 | .picker__year-display { 5402 | font-size:1.8rem; 5403 | color:rgba(255,255,255,.4) 5404 | } 5405 | .picker__box { 5406 | border-radius:2px; 5407 | overflow:hidden; 5408 | padding:0 5409 | } 5410 | .picker__calendar-container { 5411 | padding:0 1rem 5412 | } 5413 | .picker__calendar-container thead { 5414 | border:none 5415 | } 5416 | .picker__table { 5417 | margin-top:0; 5418 | margin-bottom:.5em 5419 | } 5420 | .picker__day--infocus { 5421 | color:#595959; 5422 | letter-spacing:-.3; 5423 | padding:.75rem 0; 5424 | font-weight:400; 5425 | border:1px solid transparent 5426 | } 5427 | .picker__day.picker__day--today { 5428 | color:#26a69a 5429 | } 5430 | .picker__day.picker__day--today.picker__day--selected { 5431 | color:#fff 5432 | } 5433 | .picker__weekday { 5434 | font-size:.9rem 5435 | } 5436 | .picker--focused .picker__day--selected,.picker__day--selected,.picker__day--selected:hover { 5437 | border-radius:50%; 5438 | transform:scale(.9); 5439 | background-color:#26a69a; 5440 | color:#fff 5441 | } 5442 | .picker--focused .picker__day--selected.picker__day--outfocus,.picker__day--selected.picker__day--outfocus,.picker__day--selected:hover.picker__day--outfocus,button.picker__clear:focus,button.picker__close:focus,button.picker__today:focus { 5443 | background-color:#a1ded8 5444 | } 5445 | .picker__footer { 5446 | text-align:right; 5447 | padding:5px 10px 5448 | } 5449 | .picker__close,.picker__today { 5450 | font-size:1.1rem; 5451 | padding:0 1rem; 5452 | color:#26a69a 5453 | } 5454 | .picker__nav--next:before,.picker__nav--prev:before { 5455 | content:" "; 5456 | border-top:.5em solid transparent; 5457 | border-bottom:.5em solid transparent; 5458 | border-right:.75em solid #676767; 5459 | width:0; 5460 | height:0; 5461 | display:block; 5462 | margin:0 auto 5463 | } 5464 | section,section div#particles-js canvas.particles-js-canvas-el { 5465 | position:relative; 5466 | height:auto; 5467 | width:100% 5468 | } 5469 | .picker__nav--next:before { 5470 | border-right:0; 5471 | border-left:.75em solid #676767 5472 | } 5473 | .picker__list { 5474 | list-style:none; 5475 | padding:.75em 0 4.2em; 5476 | margin:0 5477 | } 5478 | .picker__list-item { 5479 | border-bottom:1px solid #ddd; 5480 | border-top:1px solid #ddd; 5481 | margin-bottom:-1px; 5482 | position:relative; 5483 | background:#fff; 5484 | padding:.75em 1.25em 5485 | } 5486 | .picker__list-item--highlighted,.picker__list-item:hover { 5487 | border-color:#0089ec; 5488 | z-index:10 5489 | } 5490 | .picker--focused .picker__list-item--highlighted,.picker__list-item--highlighted:hover,.picker__list-item:hover { 5491 | cursor:pointer; 5492 | color:#000; 5493 | background:#b1dcfb 5494 | } 5495 | @media (min-height:46.75em) { 5496 | .picker__list-item { 5497 | padding:.5em 1em 5498 | } 5499 | } 5500 | .picker--focused .picker__list-item--selected,.picker__list-item--selected,.picker__list-item--selected:hover { 5501 | background:#0089ec; 5502 | color:#fff; 5503 | z-index:10 5504 | } 5505 | .picker--focused .picker__list-item--disabled,.picker__list-item--disabled,.picker__list-item--disabled:hover { 5506 | background:#f5f5f5; 5507 | color:#ddd; 5508 | cursor:default; 5509 | border-color:#ddd; 5510 | z-index:auto 5511 | } 5512 | .navbar-fixed,nav { 5513 | z-index:1001 5514 | } 5515 | .picker--time .picker__button--clear { 5516 | display:block; 5517 | width:80%; 5518 | margin:1em auto 0; 5519 | padding:1em 1.25em; 5520 | background:0 0; 5521 | border:0; 5522 | font-weight:500; 5523 | font-size:.67em; 5524 | text-align:center; 5525 | text-transform:uppercase; 5526 | color:#666 5527 | } 5528 | .picker--time .picker__button--clear:focus,.picker--time .picker__button--clear:hover { 5529 | background:#e20; 5530 | border-color:#e20; 5531 | cursor:pointer; 5532 | color:#fff; 5533 | outline:0 5534 | } 5535 | .picker--time .picker__button--clear:before { 5536 | top:-.25em; 5537 | color:#666; 5538 | font-size:1.25em; 5539 | font-weight:700 5540 | } 5541 | .picker--time .picker__button--clear:focus:before,.picker--time .picker__button--clear:hover:before { 5542 | color:#fff 5543 | } 5544 | .picker--time .picker__frame { 5545 | min-width:256px; 5546 | max-width:320px 5547 | } 5548 | .picker--time .picker__box { 5549 | font-size:1em; 5550 | background:#f2f2f2; 5551 | padding:0 5552 | } 5553 | @media (min-height:40.125em) { 5554 | .picker--time .picker__box { 5555 | margin-bottom:5em 5556 | } 5557 | } 5558 | nav { 5559 | background-color:#fff; 5560 | width:100%; 5561 | font-weight:300; 5562 | overflow:visible!important 5563 | } 5564 | nav a,nav ul li a { 5565 | color:#212121 5566 | } 5567 | nav .brand-logo img { 5568 | margin-top:2px; 5569 | max-height:60px 5570 | } 5571 | nav .nav-wrapper { 5572 | padding:0 30px 5573 | } 5574 | nav .right-nav { 5575 | float:right; 5576 | margin-left:30px 5577 | } 5578 | nav ul li.link:hover { 5579 | background-color:#fff; 5580 | -moz-box-shadow:inset 0 -2px 0 0 #fbc02d; 5581 | -webkit-box-shadow:inset 0 -2px 0 0 #fbc02d; 5582 | box-shadow:inset 0 -2px 0 0 #fbc02d 5583 | } 5584 | .dropdown-content { 5585 | min-width:130px 5586 | } 5587 | .dropdown-content li { 5588 | font-size:1rem; 5589 | color:rgba(0,0,0,.87); 5590 | line-height:1rem 5591 | } 5592 | .dark-grey-text,html { 5593 | color:#121212 5594 | } 5595 | section h4{ 5596 | color:#006cc1; 5597 | } 5598 | .dropdown-content li .dropdown-content li.active,.dropdown-content li :hover { 5599 | background-color:rgba(0,0,0,.06) 5600 | } 5601 | .dropdown-content li .dropdown-content li>span,.dropdown-content li>a { 5602 | padding:15px 5603 | } 5604 | .absolute-right,.floating-absolute-right { 5605 | position:absolute; 5606 | right:50px; 5607 | z-index:1000; 5608 | margin:0 5609 | } 5610 | .floating-absolute-right { 5611 | bottom:-27.75px 5612 | } 5613 | .absolute-right { 5614 | bottom:37px 5615 | } 5616 | html { 5617 | -ms-text-size-adjust:100%; 5618 | -webkit-text-size-adjust:100%; 5619 | line-height:1.5; 5620 | font-weight:400 5621 | } 5622 | @media only screen and (min-width:0) { 5623 | html { 5624 | font-size:15px 5625 | } 5626 | } 5627 | @media only screen and (min-width:992px) { 5628 | html { 5629 | font-size:22px 5630 | } 5631 | } 5632 | @media only screen and (min-width:1200px) { 5633 | html { 5634 | font-size:18px 5635 | } 5636 | } 5637 | h1,h2,h3,h4 { 5638 | font-weight:100; 5639 | color:#5a5a5a 5640 | } 5641 | h5,h6,p { 5642 | font-weight:300 5643 | } 5644 | h5,h6 { 5645 | line-height:normal 5646 | } 5647 | a { 5648 | color:#3188c9 5649 | } 5650 | p { 5651 | font-size:18px 5652 | } 5653 | @media only screen and (max-width:992px) { 5654 | p { 5655 | font-size:15px 5656 | } 5657 | } 5658 | p code { 5659 | font-size:.9em; 5660 | color:#414B82; 5661 | line-height:1.3em; 5662 | font-weight:700 5663 | } 5664 | .waves-effect.waves-stamplay .waves-ripple { 5665 | background-color:rgba(65,75,130,.7) 5666 | } 5667 | @media only screen and (min-width:993px) { 5668 | .container { 5669 | width:70% 5670 | } 5671 | } 5672 | * { 5673 | -moz-box-sizing:border-box; 5674 | -webkit-box-sizing:border-box; 5675 | box-sizing:border-box 5676 | } 5677 | body,html { 5678 | min-width:100%!important; 5679 | box-sizing:border-box; 5680 | overflow:hidden; 5681 | cursor:auto; 5682 | background-color: #f5f5f5; 5683 | 5684 | } 5685 | code { 5686 | border-radius:2px; 5687 | font-family:'Source Code Pro' 5688 | } 5689 | hr.divider { 5690 | border:none; 5691 | border-bottom:1px solid #e0e0e0!important 5692 | } 5693 | blockquote { 5694 | border-left-color:#414B82 5695 | } 5696 | .slider .slides { 5697 | background-color:transparent 5698 | } 5699 | .slider .indicators .indicator-item.active { 5700 | background-color:#414B82 5701 | } 5702 | section { 5703 | position:relative; 5704 | padding-top:50px; 5705 | padding-bottom:50px 5706 | } 5707 | section div#particles-js { 5708 | top:0; 5709 | position:absolute; 5710 | width:100%; 5711 | height:100% 5712 | } 5713 | section h4 { 5714 | font-weight:300; 5715 | margin-bottom:50px 5716 | } 5717 | section h4.with-subtitle { 5718 | margin-bottom:16.67px 5719 | } 5720 | section h5.subtitle { 5721 | color:#5a5a5a; 5722 | /* margin-bottom:50px;*/ 5723 | font-size:1.2em 5724 | } 5725 | section img { 5726 | width:100% 5727 | } 5728 | section .row.three-paragraphs h5 { 5729 | font-weight:400; 5730 | font-size:1.2em; 5731 | margin-bottom:5px; 5732 | color:#121212 5733 | } 5734 | @media only screen and (max-width:992px) { 5735 | section .row.three-paragraphs h5 { 5736 | font-size:1.4em 5737 | } 5738 | } 5739 | section .row.three-paragraphs p { 5740 | margin-top:5px; 5741 | color:#5a5a5a 5742 | } 5743 | section.page-header-blue { 5744 | padding:40px 0 20px; 5745 | background:url(../images/exagon-pattern.png) #01579b 5746 | } 5747 | section.page-header-blue h2 { 5748 | font-size:36px 5749 | } 5750 | section.page-header-blue h2 .heading-divider { 5751 | display:block; 5752 | width:60px; 5753 | height:3px; 5754 | background:#fbc02d; 5755 | margin:25px auto 5756 | } 5757 | .interlude,.small-interlude { 5758 | z-index:-1; 5759 | background-color:#01579b; 5760 | width:100%; 5761 | color:#fff; 5762 | overflow:hidden 5763 | } 5764 | section.page-header-blue .btn,section.page-header-blue .btn-large { 5765 | margin-top:25px; 5766 | width:100%; 5767 | height:50px; 5768 | padding:0 1em 5769 | } 5770 | section.page-header-blue .btn span,section.page-header-blue .btn-large span { 5771 | vertical-align:-webkit-baseline-middle 5772 | } 5773 | @media only screen and (max-width:992px) { 5774 | section { 5775 | padding:30px 0 5776 | } 5777 | section h4 { 5778 | font-size:2em 5779 | } 5780 | } 5781 | @media only screen and (max-width:600px) { 5782 | section { 5783 | height:auto 5784 | } 5785 | } 5786 | section.page { 5787 | height:auto 5788 | } 5789 | .interlude { 5790 | position:relative; 5791 | padding:3rem 2rem 5792 | } 5793 | .small-interlude { 5794 | height:120px; 5795 | padding:20px 30px; 5796 | text-align:center 5797 | } 5798 | .small-interlude .btn,.small-interlude .btn-large { 5799 | margin-bottom:-7px 5800 | } 5801 | .small-interlude h4 { 5802 | display:inline-block; 5803 | margin:15px 30px 5804 | } 5805 | .divider { 5806 | background-color:silver 5807 | } 5808 | .full-height { 5809 | height:100% 5810 | } 5811 | .full-width { 5812 | width:100% 5813 | } 5814 | .no-space { 5815 | margin:0; 5816 | padding:0 5817 | } 5818 | .no-padding { 5819 | padding:0!important 5820 | } 5821 | .no-margin { 5822 | margin:0!important 5823 | } 5824 | .no-up-and-down-margin { 5825 | margin-top:0!important; 5826 | margin-bottom:0!important 5827 | } 5828 | .skipper { 5829 | height:1px; 5830 | font-size:0 5831 | } 5832 | table.horizontal { 5833 | border:1px solid #e0e0e0 5834 | } 5835 | table.horizontal tr { 5836 | border-bottom:1px solid #e0e0e0 5837 | } 5838 | table.horizontal tr:last-child { 5839 | border-bottom:none 5840 | } 5841 | table.horizontal th { 5842 | background-color:#f2f2f2; 5843 | border-right:1px solid #e0e0e0; 5844 | padding:0 20px 5845 | } 5846 | table.horizontal td { 5847 | padding:20px 5848 | } 5849 | table.horizontal td.bordered { 5850 | border-right:1px solid #e0e0e0; 5851 | min-width:125px 5852 | } 5853 | .btn i,.btn-large i { 5854 | vertical-align:middle 5855 | } 5856 | .input-field.light label,footer.page-footer .input-field.footer-copyright label { 5857 | color:#fff 5858 | } 5859 | .input-field.light input[type=date],.input-field.light input[type=email],.input-field.light input[type=number],.input-field.light input[type=password],.input-field.light input[type=search],.input-field.light input[type=tel],.input-field.light input[type=text],.input-field.light input[type=url],.input-field.light textarea.materialize-textarea,footer.page-footer .input-field.footer-copyright input[type=date],footer.page-footer .input-field.footer-copyright input[type=email],footer.page-footer .input-field.footer-copyright input[type=number],footer.page-footer .input-field.footer-copyright input[type=password],footer.page-footer .input-field.footer-copyright input[type=search],footer.page-footer .input-field.footer-copyright input[type=tel],footer.page-footer .input-field.footer-copyright input[type=text],footer.page-footer .input-field.footer-copyright input[type=url],footer.page-footer .input-field.footer-copyright textarea.materialize-textarea { 5860 | border-color:#fff 5861 | } 5862 | .input-field.light input[type=date]:focus,.input-field.light input[type=email]:focus,.input-field.light input[type=number]:focus,.input-field.light input[type=password]:focus,.input-field.light input[type=search]:focus,.input-field.light input[type=tel]:focus,.input-field.light input[type=text]:focus,.input-field.light input[type=url]:focus,.input-field.light textarea.materialize-textarea:focus,footer.page-footer .input-field.footer-copyright input[type=date]:focus,footer.page-footer .input-field.footer-copyright input[type=email]:focus,footer.page-footer .input-field.footer-copyright input[type=number]:focus,footer.page-footer .input-field.footer-copyright input[type=password]:focus,footer.page-footer .input-field.footer-copyright input[type=search]:focus,footer.page-footer .input-field.footer-copyright input[type=tel]:focus,footer.page-footer .input-field.footer-copyright input[type=text]:focus,footer.page-footer .input-field.footer-copyright input[type=url]:focus,footer.page-footer .input-field.footer-copyright textarea.materialize-textarea:focus { 5863 | border-color:#26a69a 5864 | } 5865 | footer { 5866 | text-align: center; 5867 | font-family: Arial; 5868 | font-size: 12px; 5869 | color:#9b9b9b; 5870 | } 5871 | footer h4 { 5872 | padding:15px 0 5873 | } 5874 | footer #footer-nav { 5875 | background-color:#01579b; 5876 | min-height:200px; 5877 | padding-top:30px; 5878 | padding-bottom:30px 5879 | } 5880 | @media only screen and (max-width:600px) { 5881 | .collapsible-header h6 { 5882 | font-size:1rem 5883 | } 5884 | .collapsible-header i { 5885 | margin-right:5px; 5886 | width:1rem; 5887 | font-size:1rem 5888 | } 5889 | footer #footer-nav { 5890 | padding-bottom:30px; 5891 | text-align:center 5892 | } 5893 | } 5894 | footer #footer-nav a { 5895 | color:#fff 5896 | } 5897 | footer #footer-nav a:hover { 5898 | font-weight:600; 5899 | text-decoration:underline 5900 | } 5901 | footer ul li { 5902 | font-size:15px; 5903 | line-height:32px 5904 | } 5905 | .card.blueprint .card-action a { 5906 | color:#3188c9!important 5907 | } 5908 | .card.blueprint .card-action div div small { 5909 | font-size:60% 5910 | } 5911 | .card.blueprint .card-content { 5912 | max-height:100% 5913 | } 5914 | .card.blueprint .card-content .card-title { 5915 | font-weight:400; 5916 | font-size:22px 5917 | } 5918 | .card.blueprint .card-content p { 5919 | margin-bottom:10px; 5920 | height:100px 5921 | } 5922 | .card.blueprint .card-content .row.components { 5923 | margin-top:10px; 5924 | margin-bottom:0 5925 | } 5926 | .card.blueprint .card-content .row.components img.card-icon { 5927 | width:15% 5928 | } 5929 | @media only screen and (max-width:992px) { 5930 | .card.blueprint .card-content .card-title { 5931 | font-size:18px; 5932 | line-height:normal 5933 | } 5934 | .card.blueprint .card-content p { 5935 | margin-top:10px 5936 | } 5937 | .card.blueprint .card-content .row.components img.card-icon { 5938 | width:20% 5939 | } 5940 | } 5941 | .bg-blue-light { 5942 | background:#3188c9 5943 | } 5944 | .bg-blue-base { 5945 | background:#414B82 5946 | } 5947 | .bg-blue-lighten-1 { 5948 | background:#545D8E 5949 | } 5950 | .bg-blue-lighten-2 { 5951 | background:#666E9B 5952 | } 5953 | .bg-blue-lighten-3 { 5954 | background:#7A81A7 5955 | } 5956 | .bg-blue-lighten-4 { 5957 | background:#8D93B4 5958 | } 5959 | .bg-blue-lighten-5 { 5960 | background:#A0A5C0 5961 | } 5962 | .bg-blue-lighten-6 { 5963 | background:#F2F7F8 5964 | } 5965 | .bg-blue-darken-1 { 5966 | background:#3A4375 5967 | } 5968 | .bg-blue-darken-2 { 5969 | background:#343C68 5970 | } 5971 | .bg-blue-darken-3 { 5972 | background:#2D345B 5973 | } 5974 | .bg-blue-darken-4 { 5975 | background:#01579b 5976 | } 5977 | .bg-grey-base { 5978 | background:#5a5a5a 5979 | } 5980 | .bg-grey-lighten-1 { 5981 | background:#acacac 5982 | } 5983 | .bg-grey-lighten-2 { 5984 | background:#eee 5985 | } 5986 | .bg-grey-darken-1 { 5987 | background:#2d2d2d 5988 | } 5989 | .bg-grey-darken-2 { 5990 | background:#121212 5991 | } 5992 | #splash-blue { 5993 | background-color:#01579b; 5994 | background-image:radial-gradient(circle farthest-side at right bottom,#00447a 34%,#01579b 100%) 5995 | } 5996 | #splash-blue .hero-home { 5997 | min-height:400px; 5998 | display:flex; 5999 | align-items:center 6000 | } 6001 | #splash-blue .main-title { 6002 | margin-top:0; 6003 | line-height:inherit; 6004 | font-size:2.2em; 6005 | font-weight:400; 6006 | text-align:center 6007 | } 6008 | #splash-blue .sub-title { 6009 | text-align:center 6010 | } 6011 | #splash-blue .btn,#splash-blue .btn-large { 6012 | margin-top:25px; 6013 | padding:0 1em 6014 | } 6015 | @media only screen and (max-width:992px) { 6016 | #splash-blue .main-title { 6017 | font-size:2rem; 6018 | margin-bottom:0 6019 | } 6020 | #splash-blue h5 { 6021 | font-size:1.6rem; 6022 | margin:10px 0 20px 6023 | } 6024 | } 6025 | #customer-logos { 6026 | background-color:#eee; 6027 | z-index:1; 6028 | padding:.7rem 6029 | } 6030 | #customer-logos .row { 6031 | display:flex; 6032 | align-items:center 6033 | } 6034 | #customer-logos img { 6035 | width:120px 6036 | } 6037 | .testimonials .slides li img.testimonial-logo { 6038 | width:60%; 6039 | background-size:contain; 6040 | background-position:center; 6041 | background-repeat:no-repeat 6042 | } 6043 | .testimonials h3 { 6044 | font-size:26px 6045 | } 6046 | @media only screen and (max-width:600px) { 6047 | #splash-blue { 6048 | padding:30px 0; 6049 | max-height:600px 6050 | } 6051 | .testimonials h3 { 6052 | font-style:italic; 6053 | font-size:15px 6054 | } 6055 | .testimonials h3 .quote { 6056 | font-size:22px 6057 | } 6058 | } 6059 | #exagon-interlude { 6060 | background-color:#01579b; 6061 | background-image:url(../images/exagon-pattern.png); 6062 | padding:40px 0; 6063 | color:#fff 6064 | } 6065 | #exagon-interlude h4 { 6066 | color:#fff; 6067 | margin:0; 6068 | padding:20px 0 40px 6069 | } 6070 | #exagon-interlude a { 6071 | color:#eee 6072 | } 6073 | #exagon-interlude a:hover { 6074 | color:#A0A5C0 6075 | } 6076 | #exagon-interlude p { 6077 | font-family:"Roboto Condensed",sans-serif 6078 | } 6079 | #exagon-interlude .exagon img { 6080 | width:100px 6081 | } 6082 | #exagon-interlude .exagon img:hover { 6083 | transition:.2s; 6084 | -webkit-transition-timing-function:ease-out; 6085 | -webkit-transform:translate(0,-5px); 6086 | transform:translate(0,-5px); 6087 | transition-timing-function:ease-out 6088 | } 6089 | @media screen and (max-width:992px) { 6090 | #exagon-interlude .exagon { 6091 | padding:10px!important; 6092 | text-align:center 6093 | } 6094 | #exagon-interlude .exagon img { 6095 | width:75px 6096 | } 6097 | #exagon-interlude .exagon img:hover { 6098 | margin:-3px 0 3px; 6099 | -webkit-transition-timing-function:ease-out; 6100 | transition-timing-function:ease-out 6101 | } 6102 | #customer-logos .row { 6103 | height:70px 6104 | } 6105 | #customer-logos img { 6106 | width:100% 6107 | } 6108 | } 6109 | @media only screen and (max-width:600px) { 6110 | #exagon-interlude { 6111 | padding:4em 2vw 30px!important 6112 | } 6113 | #exagon-interlude .exagon { 6114 | padding:0!important; 6115 | text-align:center 6116 | } 6117 | #exagon-interlude .exagon p { 6118 | font-size:.9rem; 6119 | padding:0 6120 | } 6121 | #customer-logos .row { 6122 | height:70px 6123 | } 6124 | #customer-logos img { 6125 | width:100px 6126 | } 6127 | } 6128 | #main-features { 6129 | padding-top:50px 6130 | } 6131 | #main-features .row { 6132 | margin-bottom:5em 6133 | } 6134 | #main-features .row:last-child { 6135 | margin-bottom:0 6136 | } 6137 | #main-features .row h5 { 6138 | font-size:1.8em; 6139 | font-weight:400; 6140 | color:#2d2d2d 6141 | } 6142 | #main-features .row p { 6143 | font-size:1.4em; 6144 | font-weight:100; 6145 | color:#5a5a5a 6146 | } 6147 | #pricing-cards .card { 6148 | background-color:#414B82 6149 | } 6150 | #pricing-cards .card .card-content.main-content { 6151 | height:550px 6152 | } 6153 | @media only screen and (max-width:600px) { 6154 | #pricing-cards .card .card-content.main-content { 6155 | height:auto 6156 | } 6157 | } 6158 | #pricing-cards .card .card-content span { 6159 | display:inline-block; 6160 | position:relative 6161 | } 6162 | #pricing-cards .card .card-content span.period { 6163 | font-size:16px; 6164 | margin-left:10px 6165 | } 6166 | #pricing-cards .card .card-content span.amount { 6167 | font-size:50px; 6168 | font-weight:100 6169 | } 6170 | #pricing-cards .card .card-content ul li { 6171 | font-size:.9em; 6172 | line-height:2.5em; 6173 | font-weight:300; 6174 | text-transform:uppercase 6175 | } 6176 | #faq h6,#pricing-cards .card .card-content ul li span { 6177 | font-weight:400 6178 | } 6179 | #pricing-cards .card .card-content ul li hr { 6180 | border:0; 6181 | height:0; 6182 | width:70%; 6183 | border-top:1px solid rgba(0,0,0,.1); 6184 | border-bottom:1px solid rgba(255,255,255,.3) 6185 | } 6186 | #pricing-cards .card .card-content .heading-divider { 6187 | display:block; 6188 | width:40px; 6189 | height:1px; 6190 | background:#fbc02d; 6191 | margin:15px auto 6192 | } 6193 | #pricing-cards .card .card-action .btn-large { 6194 | margin:10px 0 6195 | } 6196 | #pricing-cards .card-note { 6197 | font-size:13px; 6198 | color:#acacac 6199 | } 6200 | #faq p { 6201 | font-weight:100; 6202 | font-size:.9em; 6203 | margin:5px 0 25px 6204 | } 6205 | .border-bottom .mdi-action-done { 6206 | color:green 6207 | } 6208 | .border-bottom .mdi-navigation-close { 6209 | color:red 6210 | } 6211 | .key-concept h5 { 6212 | font-size:22px; 6213 | font-weight:lighter; 6214 | font-variant:normal; 6215 | text-transform:uppercase; 6216 | color:#2d2d2d; 6217 | letter-spacing:.3em 6218 | } 6219 | .key-concept ul { 6220 | padding:0; 6221 | list-style-type:disc; 6222 | list-style-position:inside; 6223 | font-weight:300 6224 | } 6225 | .key-concept ul li { 6226 | list-style-type:disc; 6227 | list-style-position:outside; 6228 | margin-bottom:15px 6229 | } 6230 | .integration-hero { 6231 | padding-bottom:64px 6232 | } 6233 | .integration-hero h4 { 6234 | margin-bottom:30px 6235 | } 6236 | .integration-hero p { 6237 | margin-top:0; 6238 | padding-bottom:0 6239 | } 6240 | .integration-hero img { 6241 | width:50% 6242 | } 6243 | .integration-otherapps .col.app { 6244 | height:140px 6245 | } 6246 | .integration-otherapps .col.app img { 6247 | width:80% 6248 | } 6249 | .integration-otherapps p.app-name { 6250 | margin-top:0; 6251 | overflow:hidden; 6252 | text-overflow:ellipsis; 6253 | font-size:11px; 6254 | font-weight:500 6255 | } 6256 | .integration-otherapps p.app-name a { 6257 | color:#2d2d2d 6258 | } 6259 | @media only screen and (max-width:992px) { 6260 | .integration-otherapps .col.app { 6261 | height:90px 6262 | } 6263 | .integration-otherapps p.app-name { 6264 | font-size:11px; 6265 | display:none 6266 | } 6267 | } 6268 | .team-name { 6269 | margin-bottom:5px 6270 | } 6271 | .team-title { 6272 | margin-top:2px 6273 | } 6274 | -------------------------------------------------------------------------------- /static/js/drawingBoard.min.js: -------------------------------------------------------------------------------- 1 | /* drawingboard.js v0.4.6 - https://github.com/Leimi/drawingboard.js 2 | * Copyright (c) 2015 Emmanuel Pelletier 3 | * Licensed MIT */ 4 | !function () { "use strict"; function a(a, b) { for (; a.length > b;)a.shift() } var b = function (a) { var b = a ? a : {}, c = { provider: function () { throw new Error("No provider!") }, maxLength: 30, onUpdate: function () { } }; this.provider = "undefined" != typeof b.provider ? b.provider : c.provider, this.maxLength = "undefined" != typeof b.maxLength ? b.maxLength : c.maxLength, this.onUpdate = "undefined" != typeof b.onUpdate ? b.onUpdate : c.onUpdate, this.initialItem = null, this.clear() }; b.prototype.initialize = function (a) { this.stack[0] = a, this.initialItem = a }, b.prototype.clear = function () { this.stack = [this.initialItem], this.position = 0, this.onUpdate() }, b.prototype.save = function () { this.provider(function (b) { a(this.stack, this.maxLength), this.position = Math.min(this.position, this.stack.length - 1), this.stack = this.stack.slice(0, this.position + 1), this.stack.push(b), this.position++ , this.onUpdate() }.bind(this)) }, b.prototype.undo = function (a) { if (this.canUndo()) { var b = this.stack[--this.position]; this.onUpdate(), a && a(b) } }, b.prototype.redo = function (a) { if (this.canRedo()) { var b = this.stack[++this.position]; this.onUpdate(), a && a(b) } }, b.prototype.canUndo = function () { return this.position > 0 }, b.prototype.canRedo = function () { return this.position < this.count() }, b.prototype.count = function () { return this.stack.length - 1 }, "undefined" != typeof module && (module.exports = b), "undefined" != typeof window && (window.SimpleUndo = b) }(), window.DrawingBoard = "undefined" != typeof DrawingBoard ? DrawingBoard : {}, DrawingBoard.Utils = {}, DrawingBoard.Utils.tpl = function () { "use strict"; var a, b = "{{", c = "}}", d = "[a-z0-9_][\\.a-z0-9_]*", e = new RegExp(b + "\\s*(" + d + ")\\s*" + c, "gi"); return function (b, c) { return b.replace(e, function (b, d) { for (var e = d.split("."), f = e.length, g = c, h = 0; f > h; h++) { if (g = g[e[h]], g === a) throw "tim: '" + e[h] + "' not found in " + b; if (h === f - 1) return g } }) } }(), DrawingBoard.Utils.MicroEvent = function () { }, DrawingBoard.Utils.MicroEvent.prototype = { bind: function (a, b) { this._events = this._events || {}, this._events[a] = this._events[a] || [], this._events[a].push(b) }, unbind: function (a, b) { this._events = this._events || {}, a in this._events != !1 && this._events[a].splice(this._events[a].indexOf(b), 1) }, trigger: function (a) { if (this._events = this._events || {}, a in this._events != !1) for (var b = 0; b < this._events[a].length; b++)this._events[a][b].apply(this, Array.prototype.slice.call(arguments, 1)) } }, DrawingBoard.Utils._boxBorderSize = function (a, b, c, d) { b = !!b || !0, c = !!c || !1; var e, f = 0; "width" == d ? (e = ["border-left-width", "border-right-width"], b && e.push("padding-left", "padding-right"), c && e.push("margin-left", "margin-right")) : (e = ["border-top-width", "border-bottom-width"], b && e.push("padding-top", "padding-bottom"), c && e.push("margin-top", "margin-bottom")); for (var g = e.length - 1; g >= 0; g--)f += parseInt(a.css(e[g]).replace("px", ""), 10); return f }, DrawingBoard.Utils.boxBorderWidth = function (a, b, c) { return DrawingBoard.Utils._boxBorderSize(a, b, c, "width") }, DrawingBoard.Utils.boxBorderHeight = function (a, b, c) { return DrawingBoard.Utils._boxBorderSize(a, b, c, "height") }, DrawingBoard.Utils.isColor = function (a) { return a && a.length ? /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a) || -1 !== $.inArray(a.substring(0, 3), ["rgb", "hsl"]) : !1 }, DrawingBoard.Utils.RGBToInt = function (a, b, c) { var d = 0; return d |= (255 & a) << 16, d |= (255 & b) << 8, d |= 255 & c }, DrawingBoard.Utils.pixelAt = function (a, b, c) { var d = 4 * (c * a.width + b), e = DrawingBoard.Utils.RGBToInt(a.data[d], a.data[d + 1], a.data[d + 2]); return [d, b, c, e] }, DrawingBoard.Utils.compareColors = function (a, b, c) { if (0 === c) return a === b; var d = a >> 16 & 255, e = b >> 16 & 255, f = a >> 8 & 255, g = b >> 8 & 255, h = 255 & a, i = 255 & b; return Math.abs(d - e) <= c && Math.abs(f - g) <= c && Math.abs(h - i) <= c }, function () { for (var a = ["ms", "moz", "webkit", "o"], b = 0; b < a.length && !window.requestAnimationFrame; ++b)window.requestAnimationFrame = window[a[b] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[a[b] + "CancelAnimationFrame"] || window[a[b] + "CancelRequestAnimationFrame"] }(), window.DrawingBoard = "undefined" != typeof DrawingBoard ? DrawingBoard : {}, DrawingBoard.Board = function (a, b) { if (this.opts = this.mergeOptions(b), this.ev = new DrawingBoard.Utils.MicroEvent, this.id = a, this.$el = $(document.getElementById(a)), !this.$el.length) return !1; var c = '
'; return this.opts.controlsPosition.indexOf("bottom") > -1 ? c += '
' : c = '
' + c, this.$el.addClass("drawing-board").append(c), this.dom = { $canvasWrapper: this.$el.find(".drawing-board-canvas-wrapper"), $canvas: this.$el.find(".drawing-board-canvas"), $cursor: this.$el.find(".drawing-board-cursor"), $controls: this.$el.find(".drawing-board-controls") }, $.each(["left", "right", "center"], $.proxy(function (a, b) { return this.opts.controlsPosition.indexOf(b) > -1 ? (this.dom.$controls.attr("data-align", b), !1) : void 0 }, this)), this.canvas = this.dom.$canvas.get(0), this.ctx = this.canvas && this.canvas.getContext && this.canvas.getContext("2d") ? this.canvas.getContext("2d") : null, this.color = this.opts.color, this.ctx ? (this.storage = this._getStorage(), this.initHistory(), this.reset({ webStorage: !1, history: !1, background: !1 }), this.initControls(), this.resize(), this.reset({ webStorage: !1, history: !1, background: !0 }), this.restoreWebStorage(), this.initDropEvents(), void this.initDrawEvents()) : (this.opts.errorMessage && this.$el.html(this.opts.errorMessage), !1) }, DrawingBoard.Board.defaultOpts = { controls: ["Color", "DrawingMode", "Size", "Navigation"], controlsPosition: "top left", color: "#000000", size: 1, background: "#fff", eraserColor: "background", fillTolerance: 100, fillHack: !0, webStorage: "session", droppable: !1, enlargeYourContainer: !1, errorMessage: '

It seems you use an obsolete browser. Update it to start drawing.

', stretchImg: !1 }, DrawingBoard.Board.prototype = { mergeOptions: function (a) { return a = $.extend({}, DrawingBoard.Board.defaultOpts, a), a.background || "background" !== a.eraserColor || (a.eraserColor = "transparent"), a }, reset: function (a) { a = $.extend({ color: this.opts.color, size: this.opts.size, webStorage: !0, history: !0, background: !1 }, a), this.setMode("pencil"), a.background && this.resetBackground(this.opts.background, $.proxy(function () { a.history && this.saveHistory() }, this)), a.color && this.setColor(a.color), a.size && (this.ctx.lineWidth = a.size), this.ctx.lineCap = "round", this.ctx.lineJoin = "round", a.webStorage && this.saveWebStorage(), a.history && !a.background && this.saveHistory(), this.blankCanvas = this.getImg(), this.ev.trigger("board:reset", a) }, resetBackground: function (a, b) { a = a || this.opts.background; var c = DrawingBoard.Utils.isColor(a), d = this.getMode(); this.setMode("pencil"), this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height), c ? (this.ctx.fillStyle = a, this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height), this.history.initialize(this.getImg()), b && b()) : a && this.setImg(a, { callback: $.proxy(function () { this.history.initialize(this.getImg()), b && b() }, this) }), this.setMode(d) }, resize: function () { this.dom.$controls.toggleClass("drawing-board-controls-hidden", !this.controls || !this.controls.length); var a, b, c = [this.$el.width(), DrawingBoard.Utils.boxBorderWidth(this.$el), DrawingBoard.Utils.boxBorderWidth(this.dom.$canvasWrapper, !0, !0)], d = [this.$el.height(), DrawingBoard.Utils.boxBorderHeight(this.$el), this.dom.$controls.height(), DrawingBoard.Utils.boxBorderHeight(this.dom.$controls, !1, !0), DrawingBoard.Utils.boxBorderHeight(this.dom.$canvasWrapper, !0, !0)], e = function (a, b) { b = b || 1; for (var c = a[0], d = 1; d < a.length; d++)c += a[d] * b; return c }, f = function (a) { return e(a, -1) }; this.opts.enlargeYourContainer ? (a = this.$el.width(), b = this.$el.height(), this.$el.width(e(c)), this.$el.height(e(d))) : (a = f(c), b = f(d)), this.dom.$canvasWrapper.css("width", a + "px"), this.dom.$canvasWrapper.css("height", b + "px"), this.dom.$canvas.css("width", a + "px"), this.dom.$canvas.css("height", b + "px"), this.canvas.width = a, this.canvas.height = b }, initControls: function () { if (this.controls = [], !this.opts.controls.length || !DrawingBoard.Control) return !1; for (var a = 0; a < this.opts.controls.length; a++) { var b = null; if ("string" == typeof this.opts.controls[a]) b = new window.DrawingBoard.Control[this.opts.controls[a]](this); else if ("object" == typeof this.opts.controls[a]) { for (var c in this.opts.controls[a]) break; b = new window.DrawingBoard.Control[c](this, this.opts.controls[a][c]) } b && this.addControl(b) } }, addControl: function (a, b, c) { if ("string" != typeof a && ("object" != typeof a || !a instanceof DrawingBoard.Control)) return !1; var d = "object" == typeof b ? b : {}; c = c ? 1 * c : "number" == typeof b ? b : null, "string" == typeof a && (a = new window.DrawingBoard.Control[a](this, d)), c ? this.dom.$controls.children().eq(c).before(a.$el) : this.dom.$controls.append(a.$el), this.controls || (this.controls = []), this.controls.push(a), this.dom.$controls.removeClass("drawing-board-controls-hidden") }, initHistory: function () { this.history = new SimpleUndo({ maxLength: 30, provider: $.proxy(function (a) { a(this.getImg()) }, this), onUpdate: $.proxy(function () { this.ev.trigger("historyNavigation") }, this) }) }, saveHistory: function () { this.history.save() }, restoreHistory: function (a) { this.setImg(a, { callback: $.proxy(function () { this.saveWebStorage() }, this) }) }, goBackInHistory: function () { this.history.undo($.proxy(this.restoreHistory, this)) }, goForthInHistory: function () { this.history.redo($.proxy(this.restoreHistory, this)) }, setImg: function (a, b) { b = $.extend({ stretch: this.opts.stretchImg, callback: null }, b); var c = this.ctx, d = new Image, e = c.globalCompositeOperation; d.onload = function () { c.globalCompositeOperation = "source-over", c.clearRect(0, 0, c.canvas.width, c.canvas.height), b.stretch ? c.drawImage(d, 0, 0, c.canvas.width, c.canvas.height) : c.drawImage(d, 0, 0), c.globalCompositeOperation = e, b.callback && b.callback() }, d.src = a }, getImg: function () { return this.canvas.toDataURL("image/png") }, downloadImg: function () { var a = this.getImg(); a = a.replace("image/png", "image/octet-stream"), window.location.href = a }, saveWebStorage: function () { window[this.storage] && (window[this.storage].setItem("drawing-board-" + this.id, this.getImg()), this.ev.trigger("board:save" + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), this.getImg())) }, restoreWebStorage: function () { window[this.storage] && null !== window[this.storage].getItem("drawing-board-" + this.id) && (this.setImg(window[this.storage].getItem("drawing-board-" + this.id)), this.ev.trigger("board:restore" + this.storage.charAt(0).toUpperCase() + this.storage.slice(1), window[this.storage].getItem("drawing-board-" + this.id))) }, clearWebStorage: function () { window[this.storage] && null !== window[this.storage].getItem("drawing-board-" + this.id) && (window[this.storage].removeItem("drawing-board-" + this.id), this.ev.trigger("board:clear" + this.storage.charAt(0).toUpperCase() + this.storage.slice(1))) }, _getStorage: function () { return !this.opts.webStorage || "session" !== this.opts.webStorage && "local" !== this.opts.webStorage ? !1 : this.opts.webStorage + "Storage" }, initDropEvents: function () { return this.opts.droppable ? (this.dom.$canvas.on("dragover dragenter drop", function (a) { a.stopPropagation(), a.preventDefault() }), void this.dom.$canvas.on("drop", $.proxy(this._onCanvasDrop, this))) : !1 }, _onCanvasDrop: function (a) { a = a.originalEvent ? a.originalEvent : a; var b = a.dataTransfer.files; if (!b || !b.length || -1 == b[0].type.indexOf("image") || !window.FileReader) return !1; var c = new FileReader; c.readAsDataURL(b[0]), c.onload = $.proxy(function (a) { this.setImg(a.target.result, { callback: $.proxy(function () { this.saveHistory() }, this) }), this.ev.trigger("board:imageDropped", a.target.result), this.ev.trigger("board:userAction") }, this) }, setMode: function (a, b) { b = b || !1, a = a || "pencil", this.ev.unbind("board:startDrawing", $.proxy(this.fill, this)), "transparent" === this.opts.eraserColor ? this.ctx.globalCompositeOperation = "eraser" === a ? "destination-out" : "source-over" : ("eraser" === a ? "background" === this.opts.eraserColor && DrawingBoard.Utils.isColor(this.opts.background) ? this.ctx.strokeStyle = this.opts.background : DrawingBoard.Utils.isColor(this.opts.eraserColor) && (this.ctx.strokeStyle = this.opts.eraserColor) : this.mode && "eraser" !== this.mode || (this.ctx.strokeStyle = this.color), "filler" === a && this.ev.bind("board:startDrawing", $.proxy(this.fill, this))), this.mode = a, b || this.ev.trigger("board:mode", this.mode) }, getMode: function () { return this.mode || "pencil" }, setColor: function (a) { var b = this; if (a = a || this.color, !DrawingBoard.Utils.isColor(a)) return !1; if (this.color = a, "transparent" !== this.opts.eraserColor && "eraser" === this.mode) { var c = function (a) { "eraser" !== a && (b.strokeStyle = b.color), b.ev.unbind("board:mode", c) }; this.ev.bind("board:mode", c) } else this.ctx.strokeStyle = this.color }, fill: function (a) { function b(a) { c.data[a[d]] = i, c.data[a[d] + 1] = j, c.data[a[d] + 2] = k } if (this.getImg() === this.blankCanvas) return this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height), this.ctx.fillStyle = this.color, void this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); var c = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height), d = 0, e = 1, f = 2, g = 3, h = this.ctx.strokeStyle, i = parseInt(h.substr(1, 2), 16), j = parseInt(h.substr(3, 2), 16), k = parseInt(h.substr(5, 2), 16), l = DrawingBoard.Utils.pixelAt(c, parseInt(a.coords.x, 10), parseInt(a.coords.y, 10)), m = l[g], n = this.opts.fillTolerance, o = this.opts.fillHack; if (!DrawingBoard.Utils.compareColors(m, DrawingBoard.Utils.RGBToInt(i, j, k), n)) { for (var p, q = [l], r = c.width - 1, s = c.height - 1; p = q.pop();)o && b(p), DrawingBoard.Utils.compareColors(p[g], m, n) && (o || b(p), p[e] > 0 && q.push(DrawingBoard.Utils.pixelAt(c, p[e] - 1, p[f])), p[e] < r && q.push(DrawingBoard.Utils.pixelAt(c, p[e] + 1, p[f])), p[f] > 0 && q.push(DrawingBoard.Utils.pixelAt(c, p[e], p[f] - 1)), p[f] < s && q.push(DrawingBoard.Utils.pixelAt(c, p[e], p[f] + 1))); this.ctx.putImageData(c, 0, 0) } }, initDrawEvents: function () { this.isDrawing = !1, this.isMouseHovering = !1, this.coords = {}, this.coords.old = this.coords.current = this.coords.oldMid = { x: 0, y: 0 }, this.dom.$canvas.on("mousedown touchstart", $.proxy(function (a) { this._onInputStart(a, this._getInputCoords(a)) }, this)), this.dom.$canvas.on("mousemove touchmove", $.proxy(function (a) { this._onInputMove(a, this._getInputCoords(a)) }, this)), this.dom.$canvas.on("mousemove", $.proxy(function () { }, this)), this.dom.$canvas.on("mouseup touchend", $.proxy(function (a) { this._onInputStop(a, this._getInputCoords(a)) }, this)), this.dom.$canvas.on("mouseover", $.proxy(function (a) { this._onMouseOver(a, this._getInputCoords(a)) }, this)), this.dom.$canvas.on("mouseout", $.proxy(function (a) { this._onMouseOut(a, this._getInputCoords(a)) }, this)), $("body").on("mouseup touchend", $.proxy(function () { this.isDrawing = !1 }, this)), window.requestAnimationFrame && requestAnimationFrame($.proxy(this.draw, this)) }, draw: function () { if (window.requestAnimationFrame && this.ctx.lineWidth > 10 && this.isMouseHovering) { this.dom.$cursor.css({ width: this.ctx.lineWidth + "px", height: this.ctx.lineWidth + "px" }); var a = DrawingBoard.Utils.tpl("translateX({{x}}px) translateY({{y}}px)", { x: this.coords.current.x - this.ctx.lineWidth / 2, y: this.coords.current.y - this.ctx.lineWidth / 2 }); this.dom.$cursor.css({ transform: a, "-webkit-transform": a, "-ms-transform": a }), this.dom.$cursor.removeClass("drawing-board-utils-hidden") } else this.dom.$cursor.addClass("drawing-board-utils-hidden"); if (this.isDrawing) { var b = this._getMidInputCoords(this.coords.current); this.ctx.beginPath(), this.ctx.moveTo(b.x, b.y), this.ctx.quadraticCurveTo(this.coords.old.x, this.coords.old.y, this.coords.oldMid.x, this.coords.oldMid.y), this.ctx.stroke(), this.coords.old = this.coords.current, this.coords.oldMid = b } window.requestAnimationFrame && requestAnimationFrame($.proxy(function () { this.draw() }, this)) }, _onInputStart: function (a, b) { this.coords.current = this.coords.old = b, this.coords.oldMid = this._getMidInputCoords(b), this.isDrawing = !0, window.requestAnimationFrame || this.draw(), this.ev.trigger("board:startDrawing", { e: a, coords: b }), a.stopPropagation(), a.preventDefault() }, _onInputMove: function (a, b) { this.coords.current = b, this.ev.trigger("board:drawing", { e: a, coords: b }), window.requestAnimationFrame || this.draw(), a.stopPropagation(), a.preventDefault() }, _onInputStop: function (a, b) { !this.isDrawing || a.touches && 0 !== a.touches.length || (this.isDrawing = !1, this.saveWebStorage(), this.saveHistory(), this.ev.trigger("board:stopDrawing", { e: a, coords: b }), this.ev.trigger("board:userAction"), a.stopPropagation(), a.preventDefault()) }, _onMouseOver: function (a, b) { this.isMouseHovering = !0, this.coords.old = this._getInputCoords(a), this.coords.oldMid = this._getMidInputCoords(this.coords.old), this.ev.trigger("board:mouseOver", { e: a, coords: b }) }, _onMouseOut: function (a, b) { this.isMouseHovering = !1, this.ev.trigger("board:mouseOut", { e: a, coords: b }) }, _getInputCoords: function (a) { a = a.originalEvent ? a.originalEvent : a; var b, c, d = this.canvas.getBoundingClientRect(), e = this.dom.$canvas.width(), f = this.dom.$canvas.height(); return a.touches && 1 == a.touches.length ? (b = a.touches[0].pageX, c = a.touches[0].pageY) : (b = a.pageX, c = a.pageY), b -= this.dom.$canvas.offset().left, c -= this.dom.$canvas.offset().top, b *= e / d.width, c *= f / d.height, { x: b, y: c } }, _getMidInputCoords: function (a) { return { x: this.coords.old.x + a.x >> 1, y: this.coords.old.y + a.y >> 1 } } }, DrawingBoard.Control = function (a, b) { return this.board = a, this.opts = $.extend({}, this.defaults, b), this.$el = $(document.createElement("div")).addClass("drawing-board-control"), this.name && this.$el.addClass("drawing-board-control-" + this.name), this.board.ev.bind("board:reset", $.proxy(this.onBoardReset, this)), this.initialize.apply(this, arguments), this }, DrawingBoard.Control.prototype = { name: "", defaults: {}, initialize: function () { }, addToBoard: function () { this.board.addControl(this) }, onBoardReset: function () { } }, DrawingBoard.Control.extend = function (a, b) { var c, d = this; c = a && a.hasOwnProperty("constructor") ? a.constructor : function () { return d.apply(this, arguments) }, $.extend(c, d, b); var e = function () { this.constructor = c }; return e.prototype = d.prototype, c.prototype = new e, a && $.extend(c.prototype, a), c.__super__ = d.prototype, c }, DrawingBoard.Control.Color = DrawingBoard.Control.extend({ name: "colors", initialize: function () { this.initTemplate(); var a = this; this.$el.on("click", ".drawing-board-control-colors-picker", function (b) { var c = $(this).attr("data-color"); a.board.setColor(c), a.$el.find(".drawing-board-control-colors-current").css("background-color", c).attr("data-color", c), a.board.ev.trigger("color:changed", c), a.$el.find(".drawing-board-control-colors-rainbows").addClass("drawing-board-utils-hidden"), b.preventDefault() }), this.$el.on("click", ".drawing-board-control-colors-current", function (b) { a.$el.find(".drawing-board-control-colors-rainbows").toggleClass("drawing-board-utils-hidden"), b.preventDefault() }), $("body").on("click", function (b) { var c = $(b.target), d = c.hasClass("drawing-board-control-colors-current") ? c : c.closest(".drawing-board-control-colors-current"), e = a.$el.find(".drawing-board-control-colors-current"), f = a.$el.find(".drawing-board-control-colors-rainbows"); d.length && d.get(0) === e.get(0) || f.hasClass("drawing-board-utils-hidden") || f.addClass("drawing-board-utils-hidden") }) }, initTemplate: function () { var a = '
{{rainbows}}
', b = '
', c = ""; $.each([.75, .5, .25], $.proxy(function (a, d) { var e = 0, f = null; for (c += '
', .25 == d && (f = this._rgba(0, 0, 0, 1)), .5 == d && (f = this._rgba(150, 150, 150, 1)), .75 == d && (f = this._rgba(255, 255, 255, 1)), c += DrawingBoard.Utils.tpl(b, { color: f.toString() }); 330 >= e;)c += DrawingBoard.Utils.tpl(b, { color: this._hsl2Rgba(this._hsl(e - 60, 1, d)).toString() }), e += 30; c += "
" }, this)), this.$el.append($(DrawingBoard.Utils.tpl(a, { color: this.board.color, rainbows: c }))), this.$el.find(".drawing-board-control-colors-rainbows").addClass("drawing-board-utils-hidden") }, onBoardReset: function () { this.board.setColor(this.$el.find(".drawing-board-control-colors-current").attr("data-color")) }, _rgba: function (a, b, c, d) { return { r: a, g: b, b: c, a: d, toString: function () { return "rgba(" + a + ", " + b + ", " + c + ", " + d + ")" } } }, _hsl: function (a, b, c) { return { h: a, s: b, l: c, toString: function () { return "hsl(" + a + ", " + 100 * b + "%, " + 100 * c + "%)" } } }, _hex2Rgba: function (a) { var b = parseInt(a.substring(1), 16); return this._rgba(b >> 16, b >> 8 & 255, 255 & b, 1) }, _hsl2Rgba: function (a) { function b(a, b, c) { return 0 > c && (c += 1), c > 1 && (c -= 1), 1 / 6 > c ? a + 6 * (b - a) * c : .5 > c ? b : 2 / 3 > c ? a + (b - a) * (2 / 3 - c) * 6 : a } var c, d, e, f = a.h / 360, g = a.s, h = a.l; if (0 === g) c = d = e = h; else { var i = .5 > h ? h * (1 + g) : h + g - h * g, j = 2 * h - i; c = Math.floor(255 * b(j, i, f + 1 / 3)), d = Math.floor(255 * b(j, i, f)), e = Math.floor(255 * b(j, i, f - 1 / 3)) } return this._rgba(c, d, e, 1) } }), DrawingBoard.Control.DrawingMode = DrawingBoard.Control.extend({ name: "drawingmode", defaults: { pencil: !0, eraser: !0, filler: !0 }, initialize: function () { this.prevMode = this.board.getMode(), $.each(["pencil", "eraser", "filler"], $.proxy(function (a, b) { this.opts[b] && this.$el.append('') }, this)), this.$el.on("click", "button[data-mode]", $.proxy(function (a) { var b = $(a.currentTarget).attr("data-mode"), c = this.board.getMode(); c !== b && (this.prevMode = c); var d = c === b ? this.prevMode : b; this.board.setMode(d), a.preventDefault() }, this)), this.board.ev.bind("board:mode", $.proxy(function (a) { this.toggleButtons(a) }, this)), this.toggleButtons(this.board.getMode()) }, toggleButtons: function (a) { this.$el.find("button[data-mode]").each(function (b, c) { var d = $(c); d.toggleClass("active", a === d.attr("data-mode")) }) } }), DrawingBoard.Control.Navigation = DrawingBoard.Control.extend({ name: "navigation", defaults: { back: !0, forward: !0, reset: !0 }, initialize: function () { var a = ""; if (this.opts.back && (a += ''), this.opts.forward && (a += ''), this.opts.reset && (a += ''), this.$el.append(a), this.opts.back) { var b = this.$el.find(".drawing-board-control-navigation-back"); this.board.ev.bind("historyNavigation", $.proxy(this.updateBack, this, b)), this.$el.on("click", ".drawing-board-control-navigation-back", $.proxy(function (a) { this.board.goBackInHistory(), a.preventDefault() }, this)), this.updateBack(b) } if (this.opts.forward) { var c = this.$el.find(".drawing-board-control-navigation-forward"); this.board.ev.bind("historyNavigation", $.proxy(this.updateForward, this, c)), this.$el.on("click", ".drawing-board-control-navigation-forward", $.proxy(function (a) { this.board.goForthInHistory(), a.preventDefault() }, this)), this.updateForward(c) } this.opts.reset && this.$el.on("click", ".drawing-board-control-navigation-reset", $.proxy(function (a) { this.board.reset({ background: !0 }), $('#result').html("Prediction cleared"), a.preventDefault() }, this)) }, updateBack: function (a) { this.board.history.canUndo() ? a.removeAttr("disabled") : a.attr("disabled", "disabled") }, updateForward: function (a) { this.board.history.canRedo() ? a.removeAttr("disabled") : a.attr("disabled", "disabled") } }), DrawingBoard.Control.Size = DrawingBoard.Control.extend({ name: "size", defaults: { type: "auto", dropdownValues: [1, 3, 6, 10, 20, 30, 40, 50], min: 1, max: 50 }, types: ["dropdown", "range"], initialize: function () { "auto" == this.opts.type && (this.opts.type = this._iHasRangeInput() ? "range" : "dropdown"); var a = $.inArray(this.opts.type, this.types) > -1 ? this["_" + this.opts.type + "Template"]() : !1; if (!a) return !1; this.val = this.board.opts.size, this.$el.append($(a)), this.$el.attr("data-drawing-board-type", this.opts.type), this.updateView(); var b = this; "range" == this.opts.type && this.$el.on("change", ".drawing-board-control-size-range-input", function (a) { b.val = $(this).val(), b.updateView(), b.board.ev.trigger("size:changed", b.val), a.preventDefault() }), "dropdown" == this.opts.type && (this.$el.on("click", ".drawing-board-control-size-dropdown-current", $.proxy(function () { this.$el.find(".drawing-board-control-size-dropdown").toggleClass("drawing-board-utils-hidden") }, this)), this.$el.on("click", "[data-size]", function (a) { b.val = parseInt($(this).attr("data-size"), 0), b.updateView(), b.board.ev.trigger("size:changed", b.val), a.preventDefault() })) }, _rangeTemplate: function () { var a = '
'; return DrawingBoard.Utils.tpl(a, { min: this.opts.min, max: this.opts.max, size: this.board.opts.size }) }, _dropdownTemplate: function () { var a = '
" }, onBoardReset: function () { this.updateView() }, updateView: function () { var a = this.val; if (this.board.ctx.lineWidth = a, this.$el.find(".drawing-board-control-size-range-current, .drawing-board-control-size-dropdown-current span").css({ width: a + "px", height: a + "px", borderRadius: a + "px", marginLeft: -1 * a / 2 + "px", marginTop: -1 * a / 2 + "px" }), this.$el.find(".drawing-board-control-inner").attr("title", a), "dropdown" == this.opts.type) { var b = null; $.each(this.opts.dropdownValues, function (c, d) { (null === b || Math.abs(d - a) < Math.abs(b - a)) && (b = d) }), this.$el.find(".drawing-board-control-size-dropdown").addClass("drawing-board-utils-hidden") } }, _iHasRangeInput: function () { var a, b = document.createElement("input"), c = ":)", d = document.documentElement, e = "range"; return b.setAttribute("type", e), a = "text" !== b.type, b.value = c, b.style.cssText = "position:absolute;visibility:hidden;", /^range$/.test(e) && void 0 !== b.style.WebkitAppearance && (d.appendChild(b), defaultView = document.defaultView, a = defaultView.getComputedStyle && "textfield" !== defaultView.getComputedStyle(b, null).WebkitAppearance && 0 !== b.offsetHeight, d.removeChild(b)), !!a } }), DrawingBoard.Control.Download = DrawingBoard.Control.extend({ name: "download", initialize: function () { this.$el.append(''), this.$el.on("click", ".drawing-board-control-download-button", $.proxy(function (a) { this.board.downloadImg(), a.preventDefault() }, this)) } }); -------------------------------------------------------------------------------- /static/js/hermiteResize.js: -------------------------------------------------------------------------------- 1 | function resample_single(canvas, width, height, resize_canvas, newCanvas) { 2 | var width_source = canvas.width; 3 | var height_source = canvas.height; 4 | width = Math.round(width); 5 | height = Math.round(height); 6 | 7 | var ratio_w = width_source / width; 8 | var ratio_h = height_source / height; 9 | var ratio_w_half = Math.ceil(ratio_w / 2); 10 | var ratio_h_half = Math.ceil(ratio_h / 2); 11 | 12 | var ctx = canvas.getContext("2d"); 13 | var img = ctx.getImageData(0, 0, width_source, height_source); 14 | var img2 = ctx.createImageData(width, height); 15 | var data = img.data; 16 | var data2 = img2.data; 17 | 18 | for (var j = 0; j < height; j++) { 19 | for (var i = 0; i < width; i++) { 20 | var x2 = (i + j * width) * 4; 21 | var weight = 0; 22 | var weights = 0; 23 | var weights_alpha = 0; 24 | var gx_r = 0; 25 | var gx_g = 0; 26 | var gx_b = 0; 27 | var gx_a = 0; 28 | var center_y = (j + 0.5) * ratio_h; 29 | var yy_start = Math.floor(j * ratio_h); 30 | var yy_stop = Math.ceil((j + 1) * ratio_h); 31 | for (var yy = yy_start; yy < yy_stop; yy++) { 32 | var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half; 33 | var center_x = (i + 0.5) * ratio_w; 34 | var w0 = dy * dy; //pre-calc part of w 35 | var xx_start = Math.floor(i * ratio_w); 36 | var xx_stop = Math.ceil((i + 1) * ratio_w); 37 | for (var xx = xx_start; xx < xx_stop; xx++) { 38 | var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half; 39 | var w = Math.sqrt(w0 + dx * dx); 40 | if (w >= 1) { 41 | //pixel too far 42 | continue; 43 | } 44 | //hermite filter 45 | weight = 2 * w * w * w - 3 * w * w + 1; 46 | var pos_x = 4 * (xx + yy * width_source); 47 | //alpha 48 | gx_a += weight * data[pos_x + 3]; 49 | weights_alpha += weight; 50 | //colors 51 | if (data[pos_x + 3] < 255) 52 | weight = weight * data[pos_x + 3] / 250; 53 | gx_r += weight * data[pos_x]; 54 | gx_g += weight * data[pos_x + 1]; 55 | gx_b += weight * data[pos_x + 2]; 56 | weights += weight; 57 | } 58 | } 59 | data2[x2] = gx_r / weights; 60 | data2[x2 + 1] = gx_g / weights; 61 | data2[x2 + 2] = gx_b / weights; 62 | data2[x2 + 3] = gx_a / weights_alpha; 63 | } 64 | } 65 | //clear and resize canvas 66 | if (resize_canvas === true) { 67 | newCanvas.width = width; 68 | newCanvas.height = height; 69 | } else { 70 | ctx.clearRect(0, 0, width_source, height_source); 71 | } 72 | 73 | //draw 74 | newCanvas.getContext('2d').putImageData(img2, 0, 0); 75 | } 76 | -------------------------------------------------------------------------------- /templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Digit Recognition 6 | 7 | 8 | 9 | 10 |
11 |
12 |

13 |

Digit Recognition Using CNN

14 |
Demo:
15 |
1. Draw a digit on the right board
16 |
2. Click the Predict button
17 |
3. Results will be showed
18 |
(You can repeat these steps with the clear button)
19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
Prediction will be displayed here
28 |
29 |
30 | 31 | 32 | 33 | 98 | 99 | --------------------------------------------------------------------------------