/*
 __            __  __                        __  __                        __
|  |          |  ||  |                      |  ||  |                      |  |
 |  |        |  |  |  |        ____        |  |  |  |        ____        |  |
  |  |      |  |    |  |      |    |      |  |    |  |      |    |      |  |
   |  |    |  |      |  |    |  ||  |    |  |      |  |    |  ||  |    |  |
    |  |  |  |        |  |  |  |  |  |  |  |        |  |  |  |  |  |  |  |
     |  ||  |          |  ||  |    |  ||  |          |  ||  |    |  ||  |
      |____|            |____|      |____|            |____|      |____|
	  
Copyright (C) 2019 Vanprijs Wim Websites https://vanparijswimwebsites.com
*/

/******************
 *                *
 * ADMIN PANEL V4 *
 *                *
 ******************/
 
 .admin-panel i {
    display: block;
    font-size: 5em;
    height: auto;
    padding-bottom: 0.1em;
}

.admin-panel a {
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    color: #666;
    opacity: 0.75;
    transition: all 400ms;
    -webkit-transition: all 400ms;
}

.admin-panel a:hover {
    color: #222;
    opacity: 1;
}

.admin-panel a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #69f;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 400ms ease-in-out 0s;
    transition: all 400ms ease-in-out 0s;
}

.admin-panel a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.admin-panel a:hover i {
    color: #69f;
}

.admin-panel a .wrapper {
    display: block;
    padding: 10px;
}



/******************
 *                *
 * ERROR MESSAGES *
 *                *
 ******************/

.error, .error-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/close.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    color: #600;
    font-weight: bold;
    font-size: 120%;
    background-color: #F66;
    text-align: left;
    
    display: block;
    border: 3px solid #900;
    border-radius: 5px;
}

.error p, .error-message p {
    margin: 0;
    padding: 0;
}

.success-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/check_green.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #CFC;
    color: #040;
    text-align: left;
    
    display: block;
    font-weight: bold;
    border: 3px solid #060;
    border-radius: 5px;
}

.warning-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    
    background-image: url(/static/icons/alert.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #FFBE9F;
    color: #9B4E00;
    text-align: left;
    
    display: block;
    font-weight: bold;
    border: 3px solid #9B4E00;
    border-radius: 5px;
}

.info-message {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 42px;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    
    background-image: url(/static/icons/information.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #9CF;
    text-align: left;
    
    display: block;
    border-radius: 5px;
    border: 1px solid #069;
}



/****************
 *              *
 * Validate CSS *
 *              *
 ****************/

.validationerror {
    background-color: #FF7D5E;
    border: 2px solid #900;
    color: #000;
    padding: 0.25em;
}

.validationvalid {
	  background-color: #AFFF95;
}

span.validationerror {
    border: none;
    background-color: transparent;
    color: #F00;
    font-weight: bold;
    padding-left: 10px;
}



/*********************
 *                   *
 * VWW BUTTON STYLES *
 *                   *
 *********************/

.vww-button-blue {
    background-color: #69F;
    color: #FFF;
}

.vww-button-red {
    background-color: #C33;
    color: #FFF;
}

.vww-button-green {
    background-color: #060;
    color: #FFF;
}

.center-form {
    margin: 0 auto !important;
}



/****************
 *              *
 * SORTABLE CSS *
 *              *
 ****************/

body.dragging, body.dragging * {
    cursor: move !important;
}

.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}

ol.sortable li.placeholder {
    position: relative;
}

ol.sortable li.placeholder:before {
    position: absolute;
}

ol.sortable span.actions, ol.like-sortable span.actions {
    font-size: 75%;
    margin-left: 20px;
}

ol.sortable, ol.like-sortable {
    width: 400px;
}

ol.sortable, ol.like-sortable, ol.sortable ol, ol.like-sortable ol {
    margin: auto;
    list-style-type: none;
    overflow: visible;
    padding: 0;
}

ol.sortable, ol.like-sortable {
    margin-top: 20px;
    border-top: solid 1px #ccc;
}

ol.sortable li.hidden-1, ol.like-sortable li.hidden-1 {
    background-color: #444 !important;
    color: #FFF !important;
}

ol.sortable span.actions, ol.like-sortable span.actions {
    font-size: 75%;
    margin-left: 20px;
}

ol.sortable, ol.like-sortable {
    width: 300px;
    margin: auto;
    list-style-type: none;
    overflow: visible;
    margin-top: 20px;
    border-top: solid 1px #ccc;
    font-size: 110%;
}

ol.like-sortable {
    border-top: none;
}

ol.sortable li {
    cursor: move;
    text-align: left;
    border: solid 1px #AAA;
}
    
ol.sortable ol {
    margin-left: 10px;
}



/***************
 *             *
 * CUSTOM PURE *
 *             *
 ***************/

@media screen and (min-width: 80em) {
    .cpure-hidden-above-xl {
        display: none;
    }
}

@media screen and (max-width: 80em) {
    .cpure-hidden-below-xl {
        display: none;
    }
}

@media screen and (max-width: 64em) {
    /*CUSTOM PURE CLASS: auto add margin top on elements on collapse of pure grid*/
    .cpure-hidden-below-lg {
        display: none;
    }
    
    .cpure-center-below-lg {
        text-align: center !important;
    }

    .pure-hidden-tablet {
        display: none;
    }
}

@media screen and (max-width: 48em) {
    .cpure-left-below-md {
        text-align: left !important;
    }
  
    .cpure-center-below-md {
        text-align: center !important;
    }

    .cpure-no-margin-below-md {
        margin: 0 !important;
    }

    .cpure-margin-top-below-md {
        margin-top: 1em !important;
    }

    .cpure-double-margin-top-below-md {
        margin-top: 2em !important;
    }

    .cpure-hidden-below-md{
        display: none;
    }

    .pure-hidden-phone {
        display: none;
    }
}

@media screen and (min-width: 64em) {
    .pure-hidden-desktop {
            display: none;
    }
}

.pure-button:hover {
    text-decoration: none !important;
}