@media (min-width: 576px)
{
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px)
{
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px)
{
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px)
{
    .container {
        max-width: 1140px;
    }
}

@media only screen and (max-device-width: 800px)
{
    .form-group {
        min-width: 50vw !important;
    }
    .section {
        margin-right:0px !important;
    }
    .section-content {
        padding: 12px !important;
    }
    .row.ad {
        display:block !important;
    }
    .smallscreen-only {
        display: block !important;
    }
    .bigscreen-only {
        display: none !important;
    }
}

@media only screen and (min-device-width: 800px)
{
    .smallscreen-only {
        display: none !important;
    }
    .bigscreen-only {
        display: block !important;
    }
}

body, div, td
{
    font-family:'Open Sans';
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body
{
    margin:0px;
}

h1
{
    font-size: 1.5em;
}

h2
{
    font-size: 1.2em;
    font-weight: normal;
}

h2:empty
{
    display:none;
}

input, select, textarea, button {
    border-radius: 1px;
    border:1px solid #ccc;
    padding:8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color:#fff;
    font-size:1em;
}

select {
    padding:7px;
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
    background-color:#eee;
    color:#888;
}

blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
}

section.middle {
    max-width:540px;
}

.center {
    text-align:center;
}

.separator {
    background-color:#eee;
    height:1px;
}

.clear {
    clear:both;
}

.top {
    padding-left:10px;
    padding-right:10px;
}

.top > .row > .column {
    margin-top:5px;
    margin-bottom:5px;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.container-box {
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    display:flex;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.row.middle {
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

.column.top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.column.bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.start {
    justify-content:flex-start;
}

.header {
    width:100%;
    position:absolute;
    background-color:rgba(255, 255, 255, 0.2);
    padding-top:12px;
    padding-bottom:12px;
    text-align:center;
}

.space {
    height:4px;
}

.line .row {
    max-width:1280px;
    margin: 0 auto; 
}

.large {
    font-size:1.2em;
}

.extra-large {
    font-size:1.4em;
}

.small {
    font-size:0.8em;
}

.extra-small {
    font-size:0.7em;
}

.form-group {
    padding:4px;
}

.form-group label {
}

.form-group input[type='text'], .form-group input[type='password'], .form-group select, .form-group textarea, .form-group .jdropdown {
    width:100%;
}

.f1
{
    flex:1;
}

.f2
{
    flex:2;
}

.f3
{
    flex:3;
}

.f4
{
    flex:4;
}

.f5
{
    flex:5;
}

.f6
{
    flex:6;
}

.f7
{
    flex:7;
}

.f8
{
    flex:8;
}

.f9
{
    flex:9;
}

.f10
{
    flex:10;
}

.w5
{
    width:5% !important;
}

.w10
{
    width:10% !important;
}

.w15
{
    width:15% !important;
}

.w20
{
    width:15% !important;
}

.w25
{
    width:25% !important;
}

.w30
{
    width:30% !important;
}

.w33
{
    width:33% !important;
}

.w40
{
    width:40% !important;
}

.w50
{
    width:50% !important;
}

.w60
{
    width:60% !important;
}

.w66
{
    width:66% !important;
}

.w70
{
    width:70% !important;
}

.w100
{
    width:100% !important;
}

.r20 .column
{
    width:20%;
}

.r25 .column
{
    width:25%;
}

.r33 .column
{
    width:33%;
}

.r66 .column
{
    width:66%;
}

.r50 .column
{
    width:50%;
}

.r100 .column
{
    width:100%;
}

.p0
{
    padding:0px;
}

.p2
{
    padding:2px;
}

.p4
{
    padding:4px;
}

.p6
{
    padding:6px;
}

.p8
{
    padding:8px;
}

.p10
{
    padding:10px;
}

.p15
{
    padding:15px;
}

.p20
{
    padding:20px;
}

.mr1 {
    margin-right:10px;
}

.mr2 {
    margin-right:20px;
}

.mr3 {
    margin-right:30px;
}

.ml1 {
    margin-left:10px;
}

.ml2 {
    margin-left:20px;
}

.ml3 {
    margin-left:30px;
}

.pl1 {
    padding-left:10px;
}

.pl2 {
    padding-left:20px;
}

.pl3 {
    padding-left:30px;
}

.pr1 {
    padding-right:10px;
}

.pr2 {
    padding-right:20px;
}

.pr3 {
    padding-right:30px;
}

.section {
    background-color: #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
    margin-top:10px;
    margin-right:10px;
}

.section-divisor {
    margin-top:6px;
    margin-bottom:4px;
    border-bottom:1px solid #e1e1e1;
    text-transform:uppercase;
    padding-bottom: 10px;
}

.section-divisor div {
    display:inline-block;
}

.section-divisor .section-number {
    padding:8px;
    width:40px;
    height:40px;
    text-align:center;
    font-weight:bold;
    font-size:23px;
    display:inline;
}

.section-container {
    padding:6px;
}

.section-header {
    font-size:2em;
    margin-bottom:20px;
}

.section-content {
    padding:30px;
}

.fullpath input
{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='gray'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top 50% right 5px;
    padding-right: 20px;
    text-overflow: ellipsis;
}

.fullpath-domain {
    position:absolute;
    padding:7px;
}

.fullpath-domain span {
    position:relative;
    padding:4px;
    padding-right:0px;
    color:#999;
}

.title {
    font-size:1.8em;
}

.subtitle {
    position:relative;
    top:-5px;
    margin-bottom:10px;
}

.index {
    margin-top:40px;
    margin-bottom:60px;
    list-style:none;
    line-height:2.4em;
}

.index a {
    text-decoration:none;
    color:#1f71cf;
}

/** Footer **/

.footer
{
    color:#818181;
    background-color:#1d222c;
    font-size:12px;
}
.footer a
{
    color:#818181;
}

.footer .title {
    font-size:20px;
    font-weight:bold;
    color:#fff;
    margin:0px;
    margin-bottom:20px;
    text-align:left;
}

.footer .menu {
    display:inline-block;
    vertical-align:top;
    padding:0px;
    margin:0px;
    font-size:12px;
}
.footer .menu li {
    list-style:none;
    margin-bottom: 10px;
}

.footer .separator {
    margin-top:0px;
    background-color:#ddd;
    height:1px;
}

/* Content CSS */

.folder li
{
    margin-bottom:10px;
}
.readmore
{
    text-decoration:none;
    font-size:0.9em;
}

/* Admin */

.breadcrumb {
    list-style:none;
    padding:0px;
}

.breadcrumb li {
    display:inline-block;
}

.breadcrumb a {
    text-decoration:none;
    color:#000;
}

.rotateText {
    background-color:#eee;
    width:70px;
    border-radius:4px;
}

.rotateText div {
    text-align:center;
    text-transform:uppercase;
}

.rotateText p {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    writing-mode: rl-tb; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=90);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=90)";
}

.left {
    float:left;
}

.right {
    float:right;
}

.plain {
    border:0px;
    background-color:transparent;
    cursor:pointer;
    color: #000;
    text-decoration: none;
}

.button-plain {
    border:0px;
    background-color:transparent;
    cursor:pointer;
    outline: none;
}

.button-dark {
    background-color:#737373;
    color:#fff;
    border:1px solid transparent;
    border-radius:2px;
    cursor:pointer;
    min-width:120px;
    outline:none;
}

.button-dark:disabled {
    background-color:#d3d3d3;
    color:#a3a3a3;
}

.button-light {
    background-color:#fff;
    color:#737373;
    border:1px solid #737373;
    border-radius:2px;
    cursor:pointer;
    min-width:120px;
    outline:none;
}

.button-light:disabled {
    color:#a3a3a3;
}

.button-red {
    background-color:#733333;
    color:#fff;
    border:1px solid transparent;
    border-radius:2px;
    cursor:pointer;
    min-width:120px;
    outline:none;
}

.button-red:disabled {
}

.material-icons {
    font-size:24px;
    width:24px;
    height:24px;
    line-height:24px;
}

.material-icons.selected {
    color:#777;
}

.favorite {
    font-size:24px;
    width:24px;
    height:24px;
}

.favorite.selected {
    color:red;
}

.alert {
    padding: 12px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #f44336;
    color: white;
    display:none;
}

.alert.success {
    background-color: #4CAF50;
}

.alert.info {
    background-color: #2196F3;
}

.alert.warning {
    background-color: #ff9800;
}

.error {
    border:1px solid red;
}

.users {
    width:40px;
    height:40px;
    border-radius:20px;
}

.users-overlap {
    vertical-align:bottom;
    min-height:28px;
    padding-left:10px;
}

.users-overlap img {
    width:24px;
    height:24px;
    line-height:24px;
    border-radius:24px;
    border:2px solid #fff;
    vertical-align: middle;
    margin-left:-10px;
}

.users-overlap span {
    margin-left:3px;
    font-size:0.8em;
}

.users-micro {
    width:24px;
    height:24px;
    border-radius:12px;
}

.users-small {
    width:30px;
    height:30px;
    border-radius:15px;
}

.users-medium {
    width:45px;
    height:45px;
    border-radius:23px;
}

.users-large {
    width:60px;
    height:60px;
    border-radius:30px;
}

.users-extra-large {
    width:120px;
    height:120px;
    border-radius:60px;
}

.badge
{
    position:absolute;
    background-color:red;
    color:#fff;
    width:16px;
    height:16px;
    line-height:16px;
    border-radius:16px;
    text-align:center;
    font-size:8px;
    margin:12px;
}

.badge:empty
{
    display:none;
}

.limited {
    overflow:hidden;
    white-space: nowrap;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cursor {
    cursor:pointer;
}

.prettyprint {
    line-height:1.2em;
    padding:30px;
    border:0px !important;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
`
::-webkit-input-placeholder {
   color: #000000;
}

:-moz-placeholder {
   color: #000000;  
}

::-moz-placeholder {
   color: #000000;  
}

:-ms-input-placeholder {  
   color: #000000;  
}

.arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z' fill='gray'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width:24px;
    height:24px;
    line-height:24px;
    cursor:pointer;
}

.arrow-left {
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' fill='gray'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width:24px;
    height:24px;
    line-height:24px;
    cursor:pointer;
}

.preview {
    width:100vw;
    height:100vw;
}